Webpack 简易优化-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个非常强大的前端打包工具，可以将多个 JavaScript、CSS、图片等资源打包成一个或多个文件，以便于在浏览器中加载。但是，Webpack 的默认设置并不一定是最优的，我们需要进行一些简单的优化，以提高构建速度和性能。

1. 减少打包体积

Webpack 打包出来的文件往往非常大，这会导致网页加载速度变慢。我们可以通过以下几种方式来减少打包体积：

1.1 使用 Tree Shaking

Tree Shaking 是一个非常有效的打包优化技术，可以移除未使用的代码，从而减少打包体积。要使用 Tree Shaking，我们需要满足以下条件：

使用 ES6 模块化语法
在 Webpack 配置文件中开启 optimization.usedExports 和 optimization.sideEffects 选项

// www.javascriptcn.com code example
// webpack.config.js

module.exports = {
  // ...
  optimization: {
    usedExports: true,
    sideEffects: true
  }
}

1.2 压缩代码

我们可以使用 UglifyJSPlugin 或 TerserPlugin 来压缩打包出来的 JavaScript 代码，从而减少打包体积。

// www.javascriptcn.com code example
// webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
}

1.3 使用 CDN

对于一些公共库，我们可以使用 CDN（内容分发网络）来加载，从而减少打包体积。例如：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

2. 加快构建速度

Webpack 构建速度较慢，我们可以通过以下几种方式来加快构建速度：

2.1 使用高版本的 Webpack

Webpack 的新版本通常都会优化构建速度，因此我们应该尽可能使用最新版本的 Webpack。

2.2 开启多进程构建

我们可以使用 HappyPack 或 thread-loader 等插件来开启多进程构建，从而加快构建速度。

// www.javascriptcn.com code example
// webpack.config.js

const HappyPack = require('happypack');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threads: 4,
      loaders: ['babel-loader']
    })
  ]
}

2.3 使用缓存

我们可以使用 cache-loader 或 hard-source-webpack-plugin 等插件来缓存构建结果，从而加快重复构建速度。

// www.javascriptcn.com code example
// webpack.config.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['cache-loader', 'babel-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

3. 结语

Webpack 是一个非常强大的前端打包工具，但是它的默认设置并不一定是最优的。我们可以通过减少打包体积、加快构建速度等方式来优化 Webpack 打包过程，从而提高网页性能和用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d8e90ea941bf71340457e8

Webpack 简易优化