浅谈webpack 构建性能优化策略小结

下面详细讲解“浅谈webpack 构建性能优化策略小结”这篇文章的完整攻略。

一、概述

本文旨在提供一些有关 webpack 构建性能的优化策略，帮助开发者更好地提升构建速度，提高开发效率。本文将从以下四个方面展开：

优化 webpack 配置
优化 loader 和 plugin
优化代码质量和模块规范
使用缓存

二、优化 webpack 配置

减少解析路径

在 webpack 的配置文件中，加入 resolve 属性，可以告诉 webpack 模块解析器在解析路径时要尝试哪些文件扩展名和目录。

// webpack.config.js
module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.scss'], // 尝试按顺序解析这些文件扩展名
    alias: {
      '@': srcPath
    }
  },
  //...
};

减少解析范围

另一个可以缩短解析路径时间的方法是减少解析模块的目录层级，可以在 resolve.modules 指定模块的搜索目录。

// webpack.config.js
module.exports = {
  //...
  resolve: {
    modules: [srcPath, 'node_modules'], // 只在 src 目录下查找模块和 node_modules 目录
  },
  //...
};

DllPlugin 和 DllReferencePlugin

通常情况下，我们可以将一些不经常变化的第三方库（如 jQuery、lodash 等）预先打包成一个或多个动态链接库（Dll），每次构建时只需要引入动态链接库文件即可，避免对大量公共代码进行重复打包，提高构建速度。

// webpack.dll.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue', 'vue-router', 'axios'],
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name]_dll.js',
    library: '[name]_dll',
  },
  plugins: [
    new webpack.DllPlugin({
      context: process.cwd(),
      path: path.join(__dirname, 'dll/manifest.json'),
      name: '[name]_dll',
    }),
  ],
};

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  //...
  plugins: [
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require(path.join(__dirname, 'dll/manifest.json')),
    }),
  ],
  //...
};

三、优化 loader 和 plugin

使用 happyPack

默认情况下，webpack loader 和 plugin 是单线程的，容易成为构建的瓶颈，可以使用 happyPack 将 loader 处理的阶段提升到多线程，提高构建速度。

// webpack.config.js
const Happypack = require('happypack');
const os = require('os');

module.exports = {
  //...,
  module: {
    rules: [
      {
        //...,
        use: 'happypack/loader?id=babel',
      },
      {
        //...,
        use: 'happypack/loader?id=css',
      },
      //...
    ],
  },
  plugins: [
    new Happypack({
      id: 'babel',
      use: [
        {
          loader: 'babel-loader',
          //...
        },
      ],
      threads: os.cpus().length,
    }),
    new Happypack({
      id: 'css',
      use: ['style-loader', 'css-loader', 'postcss-loader'],
      threads: os.cpus().length,
    }),
    //...
  ],
};

使用缓存 loader

如果没有缓存机制，loader 每次都需要重新编译代码，浪费大量的时间。可以在 loader 中添加 cacheDirectory 选项开启缓存：

// webpack.config.js
module.exports = {
  //...,
  module: {
    rules: [
      {
        //...,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 开启 babel 缓存
            },
          },
        ],
      },
      //...
    ],
  },
  //...
};

压缩代码

使用如下插件可以对代码进行压缩，提高加载速度：

uglifyjs-webpack-plugin：js 压缩插件
optimize-css-assets-webpack-plugin：css 压缩插件

四、优化代码质量和模块规范

减少不必要的模块打包

webpack 会将导入的所有模块进行打包，但通常有一些模块并不会被使用到。babel-plugin-lodash 可以使不会被使用的 lodash 模块不会被打包进去。

// webpack.config.js
module.exports = {
  //...,
  module: {
    rules:[{
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        plugins: ['lodash']
      }
    }],
  },
  //...,
};

异步加载组件

组件拆分和异步加载可以将代码按需请求，而不是全部请求。

// vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/views/home.vue'),
    },
    {
      path: '/about',
      component: () => import('@/views/about.vue'),
    },
    //...
  ],
});

export default router;

五、使用缓存

使用 cache-loader 和 hard-source-webpack-plugin

cache-loader 是一个可以缓存 loader 打包结果的插件，并且也支持动态缓存依赖项的 loader。而 hard-source-webpack-plugin 是一个 webpack 缓存插件。

// webpack.config.js
const CacheLoader = require('cache-loader');

module.exports = {
  //...,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.join(__dirname, '.cache'),
            },
          },
          {
            loader: 'babel-loader',
          },
        ],
      },
      //...
    ],
  },
  plugins: [
    new CacheLoader({
      cacheDirectory: path.join(__dirname, '.cache'),
    }),
    new HardSourceWebpackPlugin({
      info: {},
      cacheDirectory: path.join(__dirname, '.cache'),
    }),
    //...
  ],
};

使用持久化缓存

使用持久化缓存可以避免由于删除缓存而导致的一些不必要的构建。

// webpack.config.js
module.export = {
  //...,
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache/webpack_cache'),
  },
  //...,
};

这就是本文所提供的“浅谈webpack 构建性能优化策略小结”的完整攻略，涵盖了优化配置、优化 loader 和 plugin、优化代码质量和模块规范以及使用缓存的多个方面。同时，也包含了各种实际的代码示例，希望可以对您的工作有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈webpack 构建性能优化策略小结 - Python技术站