使用 vue 开发的项目在用 webpack 打包之后 vender 和 App 这两个 JS 文件可能很大, 而且有很多的 map 文件, 其体积也不小, 那么如何优化打包后体积呢?
引入 CDN
在 webpack.base.conf.JS 文件中添加打包排除项:
- externals: {
- 'vue': 'Vue',
- 'echarts': 'echarts',
- 'axios': 'axios',
- 'vuex': 'Vuex'
- },
然后去掉 main.JS 中的导入, 在 index.html 添加 BootCDN 的链接:
- <link href="https://cdn.bootCSS.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
- <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
- <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
关闭 SourceMap 生成
在 config/index.JS 中设置:
- cssSourceMap: false,
- productionSourceMap: false,
- productionGzip: true,
路由懒加载
component: (resolve) => require(['../components/Index.vue'], resolve)
来源: http://www.bubuko.com/infodetail-3388702.html