vue 项目webpack打包优化简单几步，10M-450K

前言

• 项目优化是我们项目上线之前必须考量的问题，体积过大，你的页面加载速度就会很慢，本文重点讲解使用vue-cli 2.0的配置，以下几个方面进行优化及其配置。

未优化之前我们npm run build

• 我们看一下体积，有10.1M这么大，里面的图片很大，打包生成的vendor文件很大，还有很多map文件。
  • vendor文件：是你项目中的外部引用的库，类似element-ui、echarts等等
  • .map文件：是项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。但是在生产环境中我们就不需要了
• 接下来我们一步一步优化：
  • 首先对.map进行优化，找到config目录下的index.js文件，然后找到下图代码位置，productionSourceMap默认为true，改成false

• 然后我们看打包之后的体积,此时已经没有.map文件了，然后大小为2.42M

• 接下来我们对vendor文件进行优化，也就是把打包进去vendor文件中的外部库，使用cdn加载。
• 我们找到build目录下的webpack基础配置，webpack.base.conf.js文件，然后在externals中配置外部引用的地址，然后在indexl.html中配置外部引用的CDN地址，一定要注意要对应你package.json的版本号，不然就会有很多你意想不到的小问题。
• externals中的文件如何配置，搂主在vue-admin-stepbystep教程中说的很明白了，在这里就不贴出来了，有需要可以去看。

• 配置好之后，我们继续打包，你会看到vendor文件已经就剩20多k了，现在打包后的体积为986k

• 接下来我们对图片进行优化，楼主这张图片未做任何处理，体积为570k
• 然后我们还是在webpack.base.conf.js中找到如下图：
• 然后我们加一行代码如下：

	loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),'image-webpack-loader']
复制代码

然后我们下载 cnpm i -save-dev image-webpack-loader,对图片进行压缩

• 继续打包，你会发现图片只剩下了41.9K,变绿了，很棒，你会发现体积还有452K了，

• 然后就是打包移除console，的一些提示信息
• 我们找到webpack.prod.conf.js 找到 new UglifyJsPlugin 丑化js，哈哈，然后加上如下两行突出的代码，就OK。

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
					drop_debugger: true,
					drop_console:true
        }
      },
复制代码

最后一般上线的时候都会走gzip压缩，需要后台支持，在上面.map代码下面 productionGzip: true,然后下载注释里面提示的插件，注意一下版本号，就可以了。

结语

• 本篇配置，你会发现，简单的一匹，没什么过多的配置，就有优化到很小的体积了。就是很多小伙伴不知道，所以在技术的路上，我们要多开阔视野，干一行爱一行。

系列文章

• [https://juejin.im/post/5c0e450ee51d4504bc5e4038]vue-admin 详细注释，必须手把手做项目系列之（一
• [https://juejin.im/post/5c1609eee51d4503ea0aa2a4 详细注释，必须手把手做项目系列之（二）
• [https://juejin.im/post/5c18db07518825421322d8cf]vue-admin 详细注释，必须手把手做项目系列之（三）丢到服务器中解决报错
• 麻雀虽小五脏俱全：[项目地址 https://github.com/whylisa/vue-admin-step-by-step.git)
• [react-step-by-step之redux详细注释]react-step-by-step之redux详细注释