webpack 优化总结

externals

公共库从CDN引入，减少打包体积，增加强缓存

• vue.config.js 添加

      config.externals = {
        ...config.externals,
        ...{
          vue: 'Vue',
          vuex: 'Vuex',
          'vue-router': 'VueRouter',
        },
      }

• public/index.html 添加

    <% if (process.env.NODE_ENV === 'development') { %>
    <% } else { %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js"></script>
    <% } %>

按需引入三方组件

• vant 用哪个引入哪个，不必要把整个库全引入 babel.config.js 配置如下，自动引入相关组件样式。不要把整个库的Css引入。

  plugins: [
    [
      'component',
      {
        libraryName: 'mint-ui',
        style: true,
      },
    ],
    [      'import',      {        libraryName: 'vant',        libraryDirectory: 'es',        style: true,      },    ],
  ],

生产环境去掉console.log

webpack内部已经有terser插件可以配置去掉console.log 不用再像网上其他文章引入uglify,这样会再进行AST解析浪费。

 config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true

忽略不用的lodash

npm i --save-dev lodash-webpack-plugin  babel-plugin-lodash

在项目文件中无论哪种引用 都会非常小 只打包用到的

import _ from 'lodash';
import {findIndex} from 'lodash';
var findIndex = require('lodash/findIndex') ;

添加 url-loader 小图直接base64

    //添加图片文件处理规则
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 4096,
            // outputPath: 'images',
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
          }
        }
      },

style-loader || MiniCssExtractPlugin

• style-loader 用于开发环境
• MiniCssExtractPlugin 用于生产环境

moment.js locale

IgnorePlugin的原理是会移除moment的所有本地文件，因为我们很多时候在开发中根本不会使用到。 这个插件的使用方式如下：

const webpack = require('webpack');
  config.plugins.push(
      // 忽略 moment.js的所有本地文件
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    )


# js中引入
const moment = require('moment');
require('moment/locale/ja');

moment.locale('ja');

cache-loader

thread-loader

异步chunk

    component: () => import(/* webpackChunkName: "edm" */ './index.vue'),

contenthash

sourceMap

preload prefetch

Tree Shaking

sideEffects

TypeScript loader

你可以为 loader 传入 transpileOnly 选项，以缩短使用 ts-loader 时的构建时间。使用此选项，会关闭类型检查。如果要再次开启类型检查，请使用 ForkTsCheckerWebpackPlugin。使用此插件会将检查过程移至单独的进程，可以加快 TypeScript 的类型检查和 ESLint 插入的速度。

module.exports = {
  // ...
  test: /\.tsx?$/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      },
    },
  ],
};
这是一个关于 ts-loader 完整示例的 Github 仓库。

最小化 entry chunk

排除第三方库的优化，引入压缩后的

如果已经是压缩后的库了，minimizer 排除

参考链接

webpack.docschina.org/guides/buil… www.jianshu.com/p/714ce38b9… www.jianshu.com/p/35bc7c988… webpack.docschina.org/guides/cach…