webpack 构建优化之减少打包后的代码体积-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack 是一个十分流行的构建工具。使用 webpack 可以对前端开发项目进行模块化管理和打包，使代码更加优雅和易于维护。但是，随着项目的逐渐增大，webpack 打包后的代码体积也会越来越大，从而影响网站的性能。因此，我们需要进行 webpack 构建优化，特别是减少打包后的代码体积，以提升网站的性能和用户体验。

一、优化 webpack 的输出

在 webpack 的配置文件中，可以通过设置 output 选项来控制打包后的代码输出格式和目录。其中，最重要的是使用 UglifyJSPlugin 插件进行代码压缩和混淆。

// www.javascriptcn.com code example
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  output: {
    filename: '[name].min.js'
  },
  plugins: [
    new UglifyJSPlugin()
  ]
};

通过这种方式，我们可以大幅度减少打包后的代码体积，并提升网站的加载速度。

二、优化 webpack 的模块加载

在 webpack 的配置文件中，可以通过设置 module 的 loaders 选项来指定模块的加载规则。其中，最常用的加载器是 babel-loader，它可以将 ES6 代码转换为浏览器可识别的代码。

// www.javascriptcn.com code example
module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

此外，在加载模块时，我们也可以使用 webpack ProvidePlugin 来提供全局变量，从而减少代码量。

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

通过这种方式，我们可以在代码中直接使用 $ 和 jQuery，而无需引入对应的库文件。

三、使用 webpack 的 Tree Shaking 功能

Tree Shaking 是 webpack 中的一个优化功能，可帮助我们自动删除未使用的代码。要使用 Tree Shaking，需要在 webpack 的配置文件中启用 UglifyJSPlugin 和 webpack.optimize.ModuleConcatenationPlugin。

// www.javascriptcn.com code example
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

module.exports = {
  plugins: [
    new UglifyJSPlugin(),
    new ModuleConcatenationPlugin()
  ]
};

使用 Tree Shaking 可以大幅度减少打包后的代码体积，提升网站的加载速度和性能。

四、使用 webpack 的 Code Splitting 功能

Code Splitting 是 webpack 中的另一个优化功能，它可以将应用程序划分为更小的代码块，从而使浏览器更快地加载所需的代码块。要使用 Code Splitting，需要在 webpack 的配置文件中指定 entry 和 output 选项。

// www.javascriptcn.com code example
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: ['jquery', 'lodash']
  },
  output: {
    filename: '[name].bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    })
  ]
};

通过以上配置，webpack 将生成两个输出文件：app.bundle.js 和 vendor.bundle.js。其中，vendor.bundle.js 包含了项目所依赖的第三方库代码，而 app.bundle.js 则包含了项目自身的代码。这样一来，当我们更新项目代码时，浏览器只需要重新下载 app.bundle.js 文件即可，从而提升网站的加载速度和性能。

五、使用 webpack 的 Dynamic Import 功能

在 webpack4 中，官方强制使用了 Dynamic Import 功能，也称为按需加载。使用 Dynamic Import，我们可以在需要时异步加载模块，从而减少打包后的代码体积，提升网站的性能和用户体验。

import('./variable').then(variable => {
  console.log(variable);
});

以上代码将异步加载 variable.js 模块，并在加载成功后打印该模块的导出变量。

通过以上方式，我们可以大幅度减少项目的初始加载体积，提升网站的性能和用户体验。

六、结语

通过上述方法，我们可以在 webpack 中优化代码，减少打包后的代码体积，提升网站的性能和用户体验。但是，在实际开发中，每个项目的情况都不尽相同，我们需要根据项目的实际需求选择适合的优化方式。希望这篇文章能够帮助大家更好地使用 webpack，提升项目的质量和效率。

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

webpack 构建优化之减少打包后的代码体积