Webpack 打包优化大牛分享！长心得-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个常用的前端打包工具，但是在实际使用中，我们会发现打包速度慢、体积大等问题，这时候就需要进行优化。本文将分享一些 Webpack 打包优化的经验和技巧，希望对大家有所帮助。

1. 减少打包体积

1.1 移除未使用的代码

在项目中，我们经常会引入一些不必要的依赖，这些依赖会被打包进最终的代码中，增加了代码的体积。因此，我们需要移除未使用的代码。

通过 Webpack 的 tree shaking 可以实现这个目标。tree shaking 是一种通过静态分析代码中未使用的部分，并将其从最终的打包结果中删除的技术。在 Webpack 中，我们可以通过设置 mode 为 production 来启用 tree shaking。

1.2 代码压缩

代码压缩可以进一步减小打包后的体积。Webpack 内置了 UglifyJSPlugin 插件，可以用来压缩代码。只需在配置文件中添加如下代码：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
}

1.3 按需加载

按需加载可以减少初始加载时间和减小打包体积。Webpack 提供了两种方法来实现按需加载：动态 import 和 require.ensure。

动态 import：

import('./module').then(module => {
  // use module
})

require.ensure：

require.ensure([], function(require) {
  const module = require('./module')
  // use module
})

2. 加快打包速度

2.1 多线程打包

多线程打包可以利用多核 CPU，加快打包速度。Webpack 4 中，我们可以通过设置 parallel 选项来启用多线程打包：

module.exports = {
  // ...
  parallel: true
}

2.2 缓存

Webpack 打包过程中，会分析模块的依赖关系，这个过程比较耗时。为了减少这个过程的时间，可以使用缓存。Webpack 内置了缓存机制，只需在配置文件中设置 cache: true 即可启用缓存。

module.exports = {
  // ...
  cache: true
}

2.3 HappyPack

HappyPack 是一个可以让 Webpack 在多个进程中并行执行任务的插件。它可以将一些耗时的 Loader 转换为多个进程并行处理，从而加快打包速度。只需在配置文件中添加如下代码：

// www.javascriptcn.com code example
const HappyPack = require('happypack')
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
      loaders: ['babel-loader']
    })
  ]
}

3. 其他优化技巧

3.1 别名

别名可以让我们在代码中更方便地引用模块。在配置文件中添加如下代码：

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3.2 DllPlugin

DllPlugin 可以将一些不需要经常更新的第三方库单独打包，从而加快打包速度。只需在配置文件中添加如下代码：

// www.javascriptcn.com code example
const webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll/[name].json'),
      name: '[name]',
      context: __dirname
    })
  ]
}

3.3 预加载

预加载可以在页面加载完成后，提前加载一些资源，从而加快页面的响应速度。只需在代码中添加如下代码：

<link rel="preload" href="path/to/resource" as="type">

结语

以上是我在使用 Webpack 过程中的一些优化经验和技巧，希望对大家有所帮助。当然，这些优化方法并不是万能的，还需要根据具体项目进行调整。

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

Webpack 打包优化大牛分享！长心得