大家都知道,Vuejs的
CLI工具
是基于webpack
来实现的,所以在项目打包后,会生成的文件会很大。
主要原因是webpack
将我们所有文件都打包成一个js文件,即使再小的项目,打包之后文件都会变得很大。
下面讲讲最近我遇到的相同问题。
1、问题
由于这次项目是在初学 Vue
之后的第一个正式项目,没有考虑到类似 路由懒加载
、 按需加载
的问题 ,所以呢,也算是没经验。
到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题。
优化前:
1 | app.js 2.3MB |
接下来看看我的优化方法。
2、优化步骤1 不生成.map文件
在 webpack.prod.cong.js
文件下,修改配置项 sourceMap
设置为 false
或者删除:
1 | new webpack.optimize.UglifyJsPlugin({ |
这样的话,开发环境就不会生成 .map
文件。
3、优化步骤2 按需加载
对于项目中,一些 通用
或者 不是特别差异
的组件可以使用按需加载,在需要的时候加载即可,并且会自动缓存。
这时候需要在 router
文件夹下的 index.js
文件修改路由配置中的 组件引入
方式:
1 | Vue.use(Router) |
这样的话,这个组件就会在你需要加载的时候才会加载。
4、优化步骤3 VueRouter的懒加载
官方文档
在 vue-router
的模块引入,将默认的 import .. from ..
引入方式,修改为一步。如下:
1 | const Foo = () => import("/Foo.vue) |
然后在 配置路由
中,和之前一样使用:
1 | Vue.use(Router) |