Vue-cli + Webpack 打包优化指南

Vue-cli 是一个官方的脚手架工具，可以快速搭建 Vue.js 项目。而 Webpack 是一个模块打包工具，可以将多个模块打包成一个文件。在前端开发中，Vue-cli 和 Webpack 通常是我们的首选工具，但是默认的打包配置不一定是最优的。本文将介绍一些 Vue-cli + Webpack 打包优化的技巧，让你的项目更快、更高效。

1. 开启 gzip 压缩

gzip 压缩是一种常用的压缩方式，可以有效地减小文件大小，提高页面加载速度。在 Webpack 中开启 gzip 压缩非常简单，只需要使用 compression-webpack-plugin 插件即可。在 Vue-cli 3.x 中，可以在 vue.config.js 中进行配置：

// javascriptcn.com 代码示例
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        deleteOriginalAssets: false
      })
    ]
  }
}

上面的配置表示只对大于 10KB 的文件进行 gzip 压缩，不删除原始文件。

2. 使用 CDN 加速

CDN 是一种常用的加速方式，可以将静态资源部署到全球各地的 CDN 节点，提高用户访问速度。在 Vue-cli 中使用 CDN 加速也非常简单，只需要在 vue.config.js 中配置 publicPath：

module.exports = {
  publicPath: 'https://cdn.example.com/'
}

上面的配置表示将静态资源部署到 https://cdn.example.com/，可以根据实际情况进行调整。

3. 按需加载

按需加载是一种常用的优化方式，可以将页面划分为多个模块，按需加载，提高页面加载速度。在 Vue.js 中使用按需加载也非常简单，只需要使用 dynamic import 即可。例如：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

上面的代码表示将 Foo.vue 和 Bar.vue 模块按需加载。

4. 使用 Tree Shaking

Tree Shaking 是一种常用的优化方式，可以将未使用的代码从打包文件中删除，减小文件大小，提高页面加载速度。在 Vue-cli 中使用 Tree Shaking 也非常简单，只需要在 package.json 中配置 "sideEffects": false，并且使用 ES6 模块化语法即可。例如：

{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": false,
  "dependencies": {
    "vue": "^2.6.10"
  }
}

上面的配置表示将所有模块都视为无副作用，可以进行 Tree Shaking。

5. 使用缓存

使用缓存是一种常用的优化方式，可以减少页面加载时间，提高用户体验。在 Vue-cli 中使用缓存也非常简单，只需要使用 hard-source-webpack-plugin 插件即可。在 Vue-cli 3.x 中，可以在 vue.config.js 中进行配置：

// javascriptcn.com 代码示例
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new HardSourceWebpackPlugin()
    ]
  }
}

上面的配置表示使用硬盘缓存，可以提高打包速度。

总结

本文介绍了一些 Vue-cli + Webpack 打包优化的技巧，包括开启 gzip 压缩、使用 CDN 加速、按需加载、使用 Tree Shaking、使用缓存等。这些技巧可以让你的项目更快、更高效，提高用户体验。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655eb17cd2f5e1655d8d601a