优化

  • noParse
    1. module: {
    2. noParse: /jquery/,
    3.   rules: [
    4.     {
    5.       test: /\.js$/,
    6.       use:{
    7.         loader: 'babel-loader',
    8.         options: {
    9.           presets: [
    10.             '@babel/preset-env',
    11.             '@babel/preset-react'
    12.           ]
    13.         }
    14.       }
    15.     }
    16.   ]
    17. },

    IgnorePlugin

    new webpack.IgnorePlugin(/.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去 ,因为页面没有用。不需要的不打包进去

dllPlugin 动态链接库

  1. module.exports = {
  2.     mode: 'development',
  3.     entry: {
  4.         react: ['react', 'react-dom']
  5.     },
  6.     output:{
  7.         filename: '_dll_[name].js',
  8.         path:path.resolve(__dirname, 'dist'),
  9.         library: '_dll_[name]', // 打包文件执行 返回的结果
  10.         // libraryTarget: 'commonjs' // umd commonjs var this  var ab = 文件结果
  11.     },
  12.     plugins: [
  13.         new webpack.DllPlugin({ // 内置库， 提前生成
  14.             name: '_dll_[name]',
  15.             path: path.resolve(__dirname, 'dist', 'manifest.json')
  16.         }),
  17.         new NoConsole()
  18.     ]
  19. }
  21. 生成 _dll_react.js 引入到 index.html中

在正常打包的 config配置

  1. new webpack.DllReferencePlugin({
  2.   // manifest.json中引入的包 都不会在打包
  3.   manifest: path.resolve(__dirname, 'dist', 'manifest.json')
  4. }),

happypack 多线程打包

  1. rules: [
  2.             {
  3.                 test: /\.js$/,
  4.                 exclude: /node_modules/,
  5.                 include: path.resolve('src'),
  6.                 use: 'happypack/loader?id=js',//js要多线程打包
  7.             }
  8.         ]
  10. new Happypack({
  11.             id: 'css',
  12.             use: ['style-loader', 'css-loader']
  13.         }),
  14.         new Happypack({
  15.             id: 'js',
  16.             use: [{
  17.                 loader: 'babel-loader',
  18.                 options: {
  19.                     presets: [
  20.                         '@babel/preset-env',
  21.                         '@babel/preset-react'
  22.                     ]
  23.                 }
  24.             }]
  25.         }),

import 再生产环境下会自动 去除没用代码 tree-shaking

require 语法 内容会在 default 中，不会 tree-shaking scope hosting 没用的变量不声明

抽离公共代码

  1. // 多入口
  2. entry：{
  3.     index: 'index.js',
  4.   test: 'test.js'
  5. },
  6. output: {
  7.     filename: '[name].js'
  8. },
  9. optimization: {
  10.         splitChunks: { // 分割代码块  多入口
  11.             cacheGroups: { // 缓存组
  12.                 common: { // 公共模块 引用的文件
  13.                     minSize: 0, // 大小是多少 抽离
  14.                     minChunks: 2, // 被引用1次以上 抽离
  15.                     chunks: 'initial',
  16.                 },
  17.                 vendor: {
  18.                     priority: 1,// 权重。优先抽离
  19.                     // 第三方模块
  20.                     test: /node_modules/, // 中的文件都抽离
  21.                     chunks: 'initial', // 入口开始
  22.                     minSize: 0, // 大小是多少 抽离
  23.                     minChunks: 2,
  24.                 }
  25.             }
  26.         }
  27.     },

赖加载

  1. // 原理是jsonp
  3. import('./source.js').then(res => {
  4.     console.log(res)
  5. })

热更新模块