vue-cli 打包优化

最新推荐文章于 2025-05-27 18:37:51 发布

weixin_34279061

最新推荐文章于 2025-05-27 18:37:51 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack json ViewUI

原文链接：http://www.cnblogs.com/sixthrhapsody/p/10192564.html

本文详细介绍了如何优化前端项目打包体积，通过拆分页面和第三方库，使用cdn加载，减少不必要的js加载，提高页面加载速度。同时，启用gzip压缩，进一步减小请求数据包大小，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 优化打包体积

先上2个图

(上图A是优化前的各个js大小对比视图，下图B是优化后，还未完全优化完成的，不过也可以看得出来对比)

图A是3个压缩文件，包括部分图片和使用的所有js，体积都偏大

图B是每个页面都区分了，以及一些大的js块都拆开了的，每个页面打开时均按需加载，而不是一次加载全部，这样就省了不必要的js加载，消耗流量；

1.1 首先vue-cli在初始化时已经预装了插件webpack-bundle-analyzer ,此插件就是打包隔离分析js，只需运行：npm run build --report 这个是执行分析并在浏览器中生成展示，图A就是未处理的，可看到只有3个大的JS，而且每个页面都会获取(因为页面跳转采用的是window.location.href,这种方式会重新渲染页面，而不是走vue的路由，而导致这个原因是app内嵌跳转无法监测拦截，所以才使用window.locaiton.href) ,这样将会导致页面加载变慢；

1.2 拆页面，在router.js中把所有的import引用的页面均改成动态import()这种引用形式，这样就会把每个页面所需的vue页面，css，js隔离分开按需加载 ，不至于一次加载全部导致页面变慢，然后拆第三方js，我们可以把第三方js拆出来，使用cdn引用，这里我使用的是bootCDN ，列举里边两个比较特殊的：

1.2.1 pdf.js 这个插件，直接占图A的一块了，太大了，我就直接干掉引用链接了，然而使用的时候出现了问题，PDFJS.getDocument这个找不到了，是PDFJS这个引用名找不到了，在网上没收到，然后想到了是不是换了个名，在debugger时直接使用window.查出来了一个pdfjsLib,改名后调试果然通过，原来PDFJS换成了pdfjsLib

1.2.2 jquery这个插件，引用时需要去掉build/webpack.base.conf.js中的$、jquery（我这里也引用了moment，所以也去掉了）

    ...
    new webpack.ProvidePlugin({
      // $: "jquery",
      // jQuery: "jquery",
      // moment:"moment"
    })
    ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          // jquery: "jquery",
          // moment:"moment"
        }
    }
    ...

然后在package.json 内部加上一段过滤的设定

...
 "externals": {
    "jQuery": "jquery",
    "moment": "moment"
 },
...

1.3 至于其他的内置cityData.js和city.js实在没办法，单独打包也很大，除非自己做一个cdn，这里没有条件也就没有处理了
1.4 最后这个月27号，定了下需要调用接口提供了，也就省了这两个大的js了，更加灵活的按需引用

2. 让浏览器选择gzip

2.1 gzip可以让浏览器选择加载.gz的文件进行浏览器端解压使用对应的文件，让请求的数据包更小，也是先上2个图

(上图C为普通打包，下图D为gzip压缩)

由以上的图C和图D可看到，就取3.js看，分别是67.1kb，14.1kb，77.9%的压缩率，不过gzip的运用需要浏览器的支持的，IE不支持，不过用到了移动端就不考虑IE了；

至于使用，其实vue-cli也是有配置的，不过对应的组件并没有加进去，但是配置地方已经有了,打开build/index.js

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

注释说的很明白，如果需要开通gzip，需要引用compression-webpack-plugin，那么我们按照提示执行：npm install --save-dev compression-webpack-plugin ，不过可能又出问题了，打包报错，提示说没找到对应的方法，查了下原因，compression-webpack-plugin的新版本已经改了配置方式，这里看网友说需要修改assets换成filename,可以搜下，但是不起作用，我就直接重新安装了1.x版本的进去了，终于好了

转载于:https://www.cnblogs.com/sixthrhapsody/p/10192564.html