vue打包优化

在初次vue打包之后，文件非常大，所以采取了几种方法优化打包，打包后文件大小确实是显著下降了，如果还有不完善的地方，欢迎一起探讨。

1、路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
所以在router文件夹下 index.js 做如下配置

路由懒加载.png

2、不生成.map文件

webpack默认会生成map文件，map文件是用来调试代码的。此外，这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。

build配置如下在 config ==> index.js 里面

打包sourceMap配置.png

3、查看打包文件结构 和 各种文件的比例

这里推荐使用 webpack-bundle-analyzer，通过她可以查看打包文件的模块组成，找出不和时宜的存在，然后优化她。

首先 npm install --save-dev webpack-bundle-analyzer
然后运行 npm run build --report 命令会自动打包，并弹出网页（包含打包文件图）

这里是因为 webpack-bundle-analyzer 的配置 vue-cli(2.0)已经帮你配置好了，传入一个report参数 就可以启动了

优化之后打包图

优化之后打包图.png

4、cdn加速

cdn加速.png

首先在index.html引入这些包
然后在 webpack.base.conf.js 里面的 webpackConfig里面下面代码（避免webpack打包vue相关）
cdn 后引入还是正常的 import引入

   externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
    }

5、不让css打包在一起(让css文件和单文件打包在一起)

默认css会打包到一个css 里面，一个就太大了
所以 在 webpack.prod.conf.js 里面把所有块打包在一起设置为false

allChunks: false,