打包体积分析和优化

本文主要是介绍打包体积分析和优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

webpack分析工具：webpack-bundle-analyzer

1. 通过<script src="./vue.js"></script>方式引入vue、vuex、vue-router等包（CDN）

// webpack.config.js
if(process.env.NODE_ENV==='production') {module.exports = {devtool: 'none',externals: {vue: 'Vue',vuex: 'Vuex',vue-router: 'VueRouter'}}
}

2. core-js-----babel的一些降级处理(针对ES6的降级处理)(兼容低版本浏览器)

// "build": "vue-cli-service build --modern" // build时加上--modern后会进行两次打包
// 打包出来的html:
// 针对高版本的浏览器(加载的打包体积小)
<script type="module" src="/js/chunk-verder.xxsfds"></script>
// 针对低版本的浏览器才会加载这个
<script scr="/js/chunk-vender.skk113" nomodule></script>

这篇关于打包体积分析和优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---