大家都知道，Vuejs的 CLI工具 是基于 webpack 来实现的，所以在项目打包后，会生成的文件会很大。
主要原因是 webpack 将我们所有文件都打包成一个js文件，即使再小的项目，打包之后文件都会变得很大。
下面讲讲最近我遇到的相同问题。

1、问题

由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。
到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。

优化前：

1
2
3
4
5
6
app.js        2.3MB
vendor.js     2.4MB
vendor.css    612kB
app.js.map    9.13MB
vendor.js.map 16.21MB
//不一一列举....

接下来看看我的优化方法。

2、优化步骤1 不生成.map文件

在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：

1
2
3
4
5
6
7
new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    },
    // sourceMap: true  //将sourceMap关闭就不会打包出.map文件
}),

这样的话，开发环境就不会生成 .map 文件。

3、优化步骤2 按需加载

对于项目中，一些 通用 或者 不是特别差异 的组件可以使用按需加载，在需要的时候加载即可，并且会自动缓存。
这时候需要在 router 文件夹下的 index.js 文件修改路由配置中的 组件引入 方式：

1
2
3
4
5
6
7
8
9
Vue.use(Router)
export default new Router({
    routes:[{
        path:"/",
        component:function(resolve){
            require(["./../components/Index"],resolve)
        }
    }]
})

这样的话，这个组件就会在你需要加载的时候才会加载。

4、优化步骤3 VueRouter的懒加载

官方文档
在 vue-router 的模块引入，将默认的 import .. from .. 引入方式，修改为一步。如下：

1
const Foo = () => import("/Foo.vue)

然后在 配置路由 中，和之前一样使用：

1
2
3
4
5
6
7
Vue.use(Router)
export default new Router({
    routes:[{
        path:"/",
        component:Foo
    }]
})

5、优化步骤4 将大的第三方包通过