Vue-Cli项目webpack打包优化

cocow
2,370 阅读2分钟

前言

看了网上很多优化的文章，但是不知道是不是版本更新了还是什么原因没有用了，尤其是 externals 所以分享下我的经验。

没有优化时

项目刚刚开工所以就比较小

可以看到主要了就是302kb的vendor.js

gizp 压缩

通过vue init webpack 生成的项目中就自带了gizp压缩的设置
在project/config/index.js中将productionGzip: true就开启了
不过插件没有下载，通过 npm i -D compression-webpack-plugin下载
不过打包是还是报错了，找了原因后有两个错误,一个是插件的版本问题,设成 "compression-webpack-plugin": "^1.1.12",就ok了， 还有一个就是在webpack加载插件是将 asset改为 filename
project/build/webpack.prod.conf.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )

因为gzip需要服务器的配合，所以就贴下服务器的配置，我用的是nginx

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 8;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";

最后看下打包后的大小

可以看到vendor.js从300kb压缩为90kb了，其他的也有压缩的js和css也有不同程度的减小

CDN加载

  • 先找好自己要用的CND连接，然后写在根目录的index.html中
    项目现在主要就是用的Vant和Vue了
    要注意vue.js的引入一定要在前面

  • 在project/build/webpack.base.conf.js中

    其中externals中key值是packjson中的包的名,而value值和CDN引入的有关系

所以value值我们以console打印为准

  • 最后是mian.js的修改，我看网上不少都是要把包的引入去掉，但是我发现不需要，而且去掉了就报错了。
    mian.js

  • 最后看下打包的效果

结语

这个文章后续应该会随着项目继续更新，把整个项目的优化的写出来
以上如果有哪里说得不对或者建议，欢迎的大家的留言分享交流，谢谢。

avatar
文章
阅读
粉丝