阅读 1041

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详细注释
关注下面的标签,发现更多相似文章
评论