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详细注释