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，通过她可以查看打包文件的模块组成，找出不和时宜的存在，然后优化她。
网上说在package.json里面配置如下：使用 npm run analyz 命令查看

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

但是我这样做了，并不行，所以直接安装这个插件来使用
首先 npm install --save-dev webpack-bundle-analyzer
然后在 build ==> webpack.dev.conf.js 里面配置

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
// ... 
plugins: [new BundleAnalyzerPlugin()]
// ... 

我开始的打包文件图

打包文件图.png

可以看到swiper文件被打包了多次，因为我是在单个组件中引入的。其实这样还是有一定的好处，就是需要那个swiper才加载，但是我的这几个页面中用到了 5个swiper，所以还是有必要把swiper引入到man.js里面，这样就只会在app.js 里面生成一个swiper.js 。

参考文章（https://jeffjade.com/2017/03/11/120-how-to-write-vue-better/）（如何写一首漂亮的vue）

在打包的过程中发现打包后，有一部分的图片被打包了两次，但是百度了好几次都没有发现有人问过同样的问题，希望大神解答。