Webpack 打包优化小记-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个流行的前端打包工具，它可以帮助我们将多个 JavaScript、CSS、HTML 文件打包成一个或多个文件，以便于在浏览器中加载和运行。不过随着项目规模的增大，Webpack 打包的速度和体积也会逐渐变得不可忽视，因此需要对其进行优化。

1. 使用 DLLPlugin

DLLPlugin 是 Webpack 官方提供的插件，可以将一些常用的库（如 React、Lodash 等）提前打包成一个或多个 DLL 文件，然后在项目中引用这些 DLL 文件即可。使用 DLLPlugin 可以减少打包时间和文件体积，提高网站性能。

下面是使用 DLLPlugin 的示例代码：

webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: {
    // 第三方库的入口文件
    vendors: ['react', 'react-dom', 'lodash']
  },
  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'vendors.bundle.js',
    library: '[name]_[hash]'
  },
  // 插件
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]',
      context: __dirname
    })
  ]
};

使用 DLL 文件：

const path = require('path');
const webpack = require('webpack');
const vendorManifest = require(path.join(__dirname, 'dist', 'vendors-manifest.json'));

module.exports = {
  // 入口文件
  entry: {
    // 应用程序的入口文件
    app: './src/app.js'
  },
  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  // 插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: vendorManifest
    })
  ]
};

2. 使用 tree shaking

tree shaking 是一种可以从代码中移除未被使用的代码的技术。Webpack 默认使用 UglifyJSPlugin 来压缩代码，但是它并没有进行 tree shaking。如果想要使用 tree shaking，可以使用 Webpack 自带的 optimize 模块和 UglifyJSPlugin。

以下是一个十分简单的示例：

webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js'
  },
  // 优化
  optimization: {
    minimize: true,
    usedExports: true
  },
  // 插件
  plugins: [
    // 压缩代码
    new webpack.optimize.UglifyJsPlugin()
  ]
};

3. 使用 HappyPack

HappyPack 是一个可以将 Webpack 任务并行化的工具。通过多线程运行 Webpack，可提高打包速度，它可以处理多种类型的资源，包括 JavaScript、CSS、HTML、JSON 等。

以下示例代码展示了如何使用 HappyPack：

webpack.config.js：

const path = require('path');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
  // 入口文件
  entry: {
    app: './src/index.js',
  },
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // 模块
  module: {
    // 加载器
    rules: [
      // js 文件
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  // 插件
  plugins: [
    // 使用 HappyPack 加载器
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
};

4. 使用 code splitting

code splitting 是一种在构建时将代码分割成多个小块的技术。通过将代码分割成不同的块，可以使不同页面或不同路由所需的代码分开加载，从而减少网页加载时间和初始页面大小。

以下示例代码展示了如何使用 code splitting：

webpack.config.js：

const path = require('path');

module.exports = {
  // 入口文件
  entry: {
    app: './src/index.js'
    vendor: ['react', 'react-dom']
  },
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  // 插件
  plugins: [
    // 生成 HTML 文件
    new HtmlWebPackPlugin({
      template: 'src/index.html'
    }),
    // 代码分割
    new webpack.optimize.SplitChunksPlugin({
      chunks: 'all',
      name: 'vendor'
    }),
    new webpack.optimize.SplitChunksPlugin({
      chunks: 'all',
      name: 'common'
    })
  ]
};

使用 import() 异步加载模块：

// 异步加载模块
import('./component.js').then(Component => {
  const c = new Component();
  document.body.appendChild(c.element);
});

总结

Webpack 打包是前端开发中不可避免的一项工作，优化打包速度和体积是提高网站性能和用户体验的重要手段。通过使用 DLLPlugin、tree shaking、HappyPack 和 code splitting 等技术，我们可以进一步优化 Webpack 打包体验，提高开发效率。

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

Webpack 打包优化小记

1. 使用 DLLPlugin

2. 使用 tree shaking

3. 使用 HappyPack

4. 使用 code splitting

总结

纠错反馈