webpack 打包性能优化指南

随着前端技术的不断发展，前端项目越来越庞大复杂，打包性能优化变得越来越重要。本文将分享一些 webpack 打包性能优化的指南，帮助你提高项目的打包效率。

1. 开启缓存

在 webpack 的配置文件中开启缓存，可以避免重复打包。可以使用 cache-loader 或 hard-source-webpack-plugin 等插件来实现缓存。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve('.cache')
            }
          },
          'babel-loader'
        ]
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

2. 分离第三方库

将第三方库（如 React、Vue 等）单独打包成一个文件，可以减小主文件的体积，提高打包速度。可以使用 dll-plugin 来实现。

// www.javascriptcn.com code example
// webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  // ...
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor-manifest.json')
    })
  ]
}

// www.javascriptcn.com code example
// webpack.dll.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.resolve(__dirname, 'dll/[name]-manifest.json')
    })
  ]
}

3. 按需加载

使用 import() 或 require.ensure() 来实现按需加载，可以减小主文件的体积，提高页面加载速度。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
}

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

4. Tree Shaking

使用 Tree Shaking 可以去除未使用的代码，减小打包体积。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true
  }
}

// module.js
export const foo = () => {}
export const bar = () => {}

// index.js
import { foo } from './module'
foo()

5. 删除无用插件

删除无用的插件可以减小打包体积，提高打包速度。可以使用 webpack-bundle-analyzer 来分析打包后的体积，找出无用的插件。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
    new CleanWebpackPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

结语

以上就是 webpack 打包性能优化的指南，希望能对你有所帮助。在实际应用中，还需要根据项目情况进行具体的优化调整。

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