乐趣区

关于前端:前端工程化6Webpack5配置示例看看这些最佳实践

作者：

jiezi

在

1. 为什么应用Webpack（利用场景）

  1. 反对新个性语言版本的编译
  2. 针对javascript模块化打包
  3. 针对所有资源，例如款式、图片、字体等进行模块化

对于1、2两点，grunt、gulp等构建工具能够很好的解决，然而无奈解决第3点。Webpack可能解决前端整体的模块化能力。

2. 具备的能力

  • 模块打包器（Module bundler）—— 自身反对js模块化
  • 加载器（loader） —— 利用babel等进行语言个性编译，转换
  • 代码拆分（Code Splitting）—— 文件按需加载
  • 资源模块（Asset Module） —— 反对加载css、字体等资源

3. 根本配置

3.1 装置

npm install webpack --save-dev
npm install webpack-cli --save-dev

3.2 入口文件：webpack.config.js

配置：mode

  1. production 生产模式下，Webpack 会主动优化打包后果；（例如：代码的压缩混同等）
  2. development 开发模式下，Webpack 会主动优化打包速度，增加一些调试过程中的辅助；
  3. none 模式下，Webpack 就是运行最原始的打包，不做任何额定解决；

配置：entry

entry 能够是相对路径，也能够是绝对路径

// entry 能够是多入口
entry: {
    index: './src/pages/index/index.js',
    album: './src/pages/album/album.js',
    work: './src/pages/work/work.js'
},

配置：output

output 必须是绝对路径

entry: {
    index: './src/main.js'
},
output: {
    filename: '[name]-[contenthash:8].bundle.js',// contenthash:8最罕用，用于防止缓存问题
    path: path.join(__dirname, 'dist')
},

配置：cache

是否关上构建缓存

3.3 资源加载逻辑

能够将js作为入口文件，在js中import css等资源

  • js驱动整个前端利用
  • 合乎资源加载逻辑，js须要这些资源
  • 保障前端我的项目的开发资源不缺失

webpack兼容的几种模块化规范：ES Modules、AMD、COmmonJS

webpack加载模块的几种形式：

  • @import，@import(css)文件时
  • css中的background:url()函数
  • html中src属性、a标签的href（须要配置）
{
    test: /.html$/,
    use: {
        loader: 'html-loader',
        options: {
            attrs: ['img:src', 'a:href']
        }
    }
}

3.4 loader/plugin 比照，自定义实现 loader/plugin

  • loader：用于资源加载并解决各种语言的转换/编译（例如将es6+/ts转换为js，css加载等）；
  • plugin：用于资源加载以外的其余打包/压缩/文件解决等性能；

参考文章：前端工程化7

3.5 loader加载资源文件

loader：大抵分为三类

  1. 编译转换
  2. 文件操作
  3. 代码查看

loader：css款式编译（留神loader程序，css-loader第一个执行）

  • 依赖：
> npm install css-loader --save-dev
> npm install style/core --save-dev
  • 配置：
  module: {
    rules: [
      {
        test: /.css$/, // 匹配文件
        use: [// use指定应用到的loader
          'style-loader', // 将css-loader转换后的后果放到style标签外面
          'css-loader'    // 先执行css-loader，而且是从后往前执行，所以须要放到上面 
        ]
      }
    ]
  }

loader：编译ES6+ => babel

  • 依赖：
> npm install babel-loader --save-dev         => babel 转换平台
> npm install @babel/core --save-dev          => babel 外围模块
> npm install @babel/preset-env --save-dev    => babel 转换语言包，env示意es6+全量包
  • 配置：
  1. babel-loader：
{// 转换js代码，es6+=>es5
    test: /\.js$/,
    exclude: /node_modules/,
    use: 'babel-loader'
},
  1. babel.config.js（配置能够提取进去：.babelrc、.babelrc.js、babel.config.js、package.json 文件）：
// .babelrc 只会影响本我的项目中的代码；babel.config.js 会影响整个我的项目中的代码，蕴含node_modules中的代码
// 举荐应用：babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}
  1. babel 罕用相干插件阐明：
> babel-loader           => webpack中转换babel的工具，相当于一个平台不做具体的工作
> @babel/core            => babel转换语言的外围性能，外围api等
> @babel/preset-env      => babel转换语言的内容包，包含es6+所有个性

// 以下内容待确认！
> @babel/cli             => 使node环境反对es6语法；@babel/core也能是node环境反对es6语法；
> @babel/polyfill        =>（一些全局办法和变量）Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比方Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的办法（比方Object.assign）都不会转码。举例来说，ES6在Array对象上新增了Array.from办法。Babel就不会转码这个办法。如果想让这个办法运行，必须应用babel-polyfill，为以后环境提供一个垫片。babel-polyfill相对来说比拟大。

> @babel/runtime  => 如果不想用babel-polyfill净化全局环境，就是用babel-runtime+babel-plugin-transform-runtime；
> @babel/plugin-transform-runtime  => babel-plugin-transform-runtime依赖于babel-runtime

> @babel/eslint-parser    => babel + eslint 的解析器（如同也没有应用？）

> 插件名调换：@babel/core === 等同于 babel-core

loader：文件/图片解决

  • 依赖：
> npm install file-loader --save-dev
> npm install url-loader --save-dev
  • 性能：
  1. file-loader 一般解决
{// 将图片文件复制到另一个目录
    test: /\.(png|svg|jpg|gif)$/,
    loader: 'file-loader',
    options: {
        name: '[name]-[contenthash:8].[ext]',
        outputPath: 'images',
        esModule: false // 新版loader须要配置，否则会产生谬误：img src=[object Module]
    },
},
  1. url-loader 和 file-loader 二选一
    url-loader 对 file-loader 有依赖，须要提前装置；
    url-loader 将图片编码为 Base64 文件：对于小文件座大小限度进行解决，缩小申请次数。
{// 将小于10kb的图片编码成base64
    test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'url-loader',  // url-loader对file-loader有依赖，须要提前装置
        options: {
            name: '[name]-[contenthash:8].[ext]',
            outputPath: 'images',
            limit: 10 * 1024,  // 10 KB 对文件大小进行限度，超过就不转换
            esModule: false    // 新版loader须要配置，否则会产生谬误：img src=[object Module]
        },
    }
}

loader：html解决（用得少，应用其余插件代替）

依赖：

> npm install html-loader --save-dev

3.6 plugins插件解决其余工作

plugin：主动生成html文件插件

  • 依赖：html-webpack-plugin
  • 性能：
  1. 根底配置
// 用于生成 index.html
new HtmlWebpackPlugin({
    title: 'index首页',
    meta: {
        viewport: 'width=device-width'
    },
    minify: {
        removeAttributeQuotes: true     // 移除属性的引号
    },
    inject: true,                       // script是否至于body底部
    template: './src/templates/index.html',
    filename: 'index.html',
    // cache: false,
    chunks: ['index'],                  // 指定加载js文件，默认全副加载
    // showErrors: true,                // 如果 webpack 编译呈现谬误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。
}),
  1. 在html模板中应用变量：
  <title>Home - <%= htmlWebpackPlugin.options.title %></title>

plugin：依据目录主动生成html文件

  • 依赖：auto-web-plugin

plugin：主动革除输入目录插件

  • 依赖：clean-webpack-plugin

plugin：拷贝文件的插件

  • 依赖：copy-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
    mode: 'production',
    plugins: [
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin({
        patterns: [
            { from: "./public/*.ico", to: "./"},
        ],
      })
    ]
})

4. 加强体验

4.1、热更新

计划1：webpack + browser-sync（本地磁盘可见文件）

  • 依赖：
> npm install browser-sync --save-dev
  • 性能：
  1. 主动编译，监控源文件；应用webpack自带配置
// 1、npm scripts中 => webpack携带命令行参数或者增加配置项
> webpack --watch

// 2、webpack.config.js => webpack配置项
watch: true, // 监听所有文件的更改，主动构建主动刷新浏览器
  1. 主动刷新浏览器，监控打包文件；应用工具browser-sync
> npm install browser-sync --save-dev
  "scripts": {
    "dev": "webpack --config webpack.dev.js",   // 配置项配了watch就能够不带参数--wacth
    "sync": "browser-sync dist --files '**/*'", // 带参数--files
  }
  1. 须要同时启用两个命令行：
webpack-sample> npm run dev
webpack-sample> npm run sync

计划2：webapck-dev-server工具（内存中看不到文件）

  • 依赖：
> npm install webapck-dev-server --save-dev
  • 性能：集成了主动编译和主动刷新浏览器，留神watch和target的配置
  • 根本配置 :
1. contentBase  => 根本门路 
2. open         => 主动关上浏览器
3. host         => 虚拟主机地址
4. port         => 端口号
5. proxy（代理） => 代理配置
  • 残缺示例：
    // watch: true,             // 热更新计划1：监听源码文件更改主动构建，监听磁盘文件主动刷新浏览器（配合browser-sync刷新浏览器）
    target: "web",              // webpack5的一个bug，须要关上能力主动刷新浏览器，参考：https://blog.csdn.net/xiaolongbaobushibao/article/details/116664883
                                // 应用devServer是不必关上watch
                                // 应用devServer常见不刷新浏览器状况：
    devServer: {                // 热更新计划2：本地开发服务器，监听源码文件主动构建和刷新浏览器，打包后果存在内存而不是磁盘中
        host: '127.0.0.1',  
        port: '8080',
        // hot: true,           // 模块热替换，如果热替换失败就主动回到页面主动刷新
        // hotOnly: true,       // 模块热替换，如果热替换失败不会主动刷新页面
        contentBase: path.resolve(__dirname,'dist'),// 指定动态资源门路的根目录，须要对应output:path为dist，
        open: true,             // 主动关上浏览器
        // watchContentBase: true,
        inline: true
        // proxy: {             // 配置代理，避免跨域问题
        //     '/api': {
        //         target: 'https://api.github.com', // http://localhost:8080/api/users -> https://api.github.com/api/users
        //         pathRewrite: {                    // http://localhost:8080/api/users -> https://api.github.com/users
        //             '^/api': ''
        //         },
        //         // 不能应用 localhost:8080 作为申请 GitHub 的主机名
        //         changeOrigin: true
        //     }
        // }
    },
  • webpack dev server不能只能刷新浏览器的问题
  1. webpack5的一个bug，参考：https://blog.csdn.net/xiaolongbaobushibao/article/details/116664883
// webpack.config.js中增加配置项
target: "web",
  1. 提取了专用代码，一些配置门路谬误等问题；例如：查看optimization、path、publicPath、contentBase等配置项

热更新最佳实际（集体认为）：

  • 本地开发最后调试阶段 （dev）=> 应用 webpack-dev-server，只有浏览器内存能看到代码

  • 本地测试或者联调阶段 （dev/pre）=> 应用 webpack + browser-sync，能看到本地代码

    因为开发阶段很多文件没有合并压缩，跟生产环境差别太大。用webpack-dev-server有些货色测不进去。

  • 预上线、生产上线阶段 （sit、prd） => 应用文件合并、压缩过后的残缺代码

4.2、模块热加载

webapck-dev-server中 HMR 模块的热更新：

注意事项：

  1. HMR须要新增一些代码，用来手动解决JS模块的热替换、图片模块热替换等（因为不同的业务场景须要解决的数据不同）。
  2. HMR新增代码与业务无关，所以会减少肯定工作量；而且写起来比拟麻烦，倡议联合框架应用欠缺的HMR计划。
  3. HMR新增代码与业务无关，然而在webpack打包过后其实是删除了的，对生产环境没有影响。

应用场景：

  1. 在页面中有一个编辑器，在编辑器中输出内容而后再批改款式。webapck-dev-server负责刷新整体页面，如果每次批改了款式后页面刷新，编辑器中的内容就会失落。HMR插件能实现在页面不刷新的状况下，部分模块的更新。
  2. 在开发过程中频繁批改页面某个模块的款式，例如：背景图片。

如何应用：

  1. 命令行参数： webpack-dev-server –hot
  2. 配置文件：
// 1、引入webpack
const webpack = require('webpack')


// 2、plugins外面增加内置插件：
plugins: [
    new webpack.HotModuleReplacementPlugin()
    ...
],

// 3、devServer中增加配置项：
// 留神：在热替换手动解决js热替换，如果报错热替换会启动失败；
// 留神：应用hotOly，热替换失败也不会主动刷新页面。
devServer: {
    // 可能呈现的谬误1：解决的热替换模块有谬误，应用hotOnly配置
    // hot: true,  // 模块热替换，如果热替换失败就主动回到页面主动刷新
    hotOnly: true, // 模块热替换，如果热替换失败不会主动刷新页面便于定位问题
    ...
}

解决JS模块的热替换

  1. webpack中的热替换api：module.hot.accept 用于注册模块处理函数
  2. 示例场景：批改编辑器模块代码后，热更新编辑器模块
// 可能呈现的谬误2：plugins没有开启配置会报错，须要在热替换代码中对module.hot进行判断
if (module.hot) {
  let lastEditor = editor

  // 1、编辑器的热替换
  // 参数1：模块
  // 参数2：处理函数 => 实现的性能：简略来说就是用js代码更新一下模块内须要更新的内容（重要），例如上面更新了编辑器。
  module.hot.accept('./editor', () => {

    //移除原来编辑器，记录数据
    const value = lastEditor.innerHTML
    document.body.removeChild(lastEditor) 

    //更新原来的数据到新的编辑器
    const newEditor = createEditor()
    newEditor.innerHTML = value
    document.body.appendChild(newEditor)
    lastEditor = newEditor
  })

  // 2、图片的热替换
  module.hot.accept('./better.png', () => {
    img.src = background
    console.log(background)
  })
}
  1. 可能呈现的谬误：
  2. 可能呈现的谬误1：解决的热替换模块有谬误，应用hotOnly配置
  3. 可能呈现的谬误2：plugins没有开启配置会报错，须要在热替换代码中对module.hot进行判断

解决图片模块的热替换

  // 2、图片的热替换
  module.hot.accept('./better.png', () => {
    img.src = background
    console.log(background)
  })

VUE + HMR 计划

参考：[本人网上找]()

REACT + HMR 计划

参考：[本人网上找]()

4.3、配置Source Map （便于查看调试代码）

记录代码转换前后的映射关系

Source Map配置计划

webpack中的devTool，依照以下3中规定配置：

  1. eval => 应用eval执行模块代码，没有生成对应的.map文件；只能看到谬误对应的文件名称；
  2. source-map => 蕴含谬误的行列信息
  3. cheap => 不蕴含谬误的列信息
  4. module => 不要loader解决源码
  5. inline => 将.map文件以data-url的模式生成放到url中，很占体积

带eval不生成.map文件：

  • eval：构建速度最快，只能定位谬误文件是哪个；
  • eval-source-map：谬误文件名称 + 谬误的行列；
  • cheap-eval-source-map：谬误文件名称 + 谬误的行；
  • cheap-module-eval-source-map：谬误文件名称 + 谬误的行 + 代码未被loader解决；

不带eval都生成了.map文件：

  • source-map：谬误文件名称 + 谬误的行列；
  • cheap-source-map：谬误文件名称 + 谬误的行 + 代码未被loader解决；
  • hidden-source-map：代码中看不见source-map源码（适宜开发第三方工具，须要的时候再应用）；
  • nosources-source-map：看不到源码，只能看到谬误行列号（生产环境能够爱护源码）；

带inline不生成.map文件，将其放到url中（不举荐应用inline）：

  • inline-source-map：将source-map以data-url形式嵌入到url中，导致代码体积变大；

最佳实际：

  • 开发模式：eval-cheap-module-source-map//webpack5中这几个单词程序不能变，前提是：

    1、代码每行不超过80字符
    2、Loader转换过后代码差别大，所以须要看源码
    3、这种模式启动慢，然而从新打包速度快
    4、留神：webpack5中对这几个单词程序有要求，必须是：

    • ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
    • eval-cheap-module-source-map => ok
    • cheap-module-eval-source-map => old这种就会报错

  • 生产模式：none、nosources-source-map

    1、这样能够防止裸露源码

4.4、配置门路别名

alias: {
    '@': resolve('src'),
    '@config': resolve('config')
}

4.5、配置波及到的门路：publicPath （未完待续，待整顿）

  • __dirname
  • process.cwd()
  • path.join(__dirname, ‘dist’)
  • path.resolve(__dirname, ‘dist’)
  • ‘./dist’
  • ‘/dist/’
// ...

5. 生产环境配置

5.1 依据环境增加不同的配置

计划1：依据命令行参数判断

如何判断环境： 命令行–env production参数会传递给env；

> webpack --env production

接管参数：

webpack 除了能够间接导出配置；还能够导出一个function，返回配置：

module.exports = config
module.exports = (env, args)=> config
  1. 命令行webpack –env production参数会传递给function的参数env；
  2. 能够在function中对env环境进行判断：
// webpack提供了一个函数
// 参数1：env
// 参数2：args
// 返回值：配置项
module.exports = (env, args) => {
    const config = {
        //...
    }

    // env 承受参数：webpack --env production
    if (env === 'production') {
        config.mode = 'production'
        config.devtool = false
        config.plugins = [
          ...config.plugins,
          new CleanWebpackPlugin(),
          new CopyWebpackPlugin(['public'])
        ]
    }
    
    return config
}

计划2：提取专用配置到文件，将配置独立到三个文件：=> 最好用

  • 依赖：webpack-merge插件
> npm install webpack-merge --save-dev  => 业余用于合并webpack配置项对象的插件
  • 性能：将配置独立到三个文件，prod、dev合并专用配置
> webpack.common.js // 专用配置 
> webpack.prod.js   // 生产环境
> webpack.dev.js    // 开发环境
  • 例如独自配置prd环境的js，合并webpack.common.js中的配置
// 合并配置，比拟业余的模块：webpack-merge
// 合并配置，最好不要用Object.assign，它在复制对象时前面的配置会齐全笼罩掉后面的配置
const { merge } = require('webpack-merge')

const common = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
    mode: 'production',
    plugins: [
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin(['public'])
    ]
})

计划3：plugin：DefinePlugin，向打包文件中注入环境变量在webpack打包时判断

  • 依赖：无，webpack内置插件：webpack.DefinePlugin
  • 性能：DefinePlugin插件能够向webpack打包文件中注入js代码间接应用，例如：
plugins: [
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      TEST_URL: 'https://api.example.com'，
      API_BASE_URL: JSON.stringify('https://api.example.com')
    })
  ]

在源码中应用变量，打包到 bundle.js ==>

// console.log(TEST_URL)，留神没有引号，不是字符串
console.log(https://api.example.com)

// console.log(API_BASE_URL)，所以须要JSON.stringify()
console.log('https://api.example.com')
  • DefinePlugin 配合 process.end.NODE_ENV 应用
  1. process.end.NODE_ENV 获取执行环境
  2. process是在nodejs环境中的全局变量，只能在webpack.config.js中应用；
  3. 想要在源码中应用process判断环境，须要应用插件：DefinePlugin将process变量注入到打包文件。
  4. 以下示例，将环境变量注入到源码boudle.js：process.env.NODE_ENV
new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify('0.0.1'),
    API_BASE_URL: JSON.stringify('https://api.example.com')
    'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
     }
});
  • process.end.NODE_ENV应用时的兼容性问题 ，在npm scripts中增加：

windows/linux兼容：

cross-env NODE_ENV=development

windows：

SET NODE_ENV=development

os x/linux：

export NODE_ENV=development

6. 优化打包性能

6.1 Tree Shaking 性能

根本应用

将未应用的代码解决掉，合并模块等性能；没有依赖项。

  • 生产环境下主动启用
  • 其余环境下开启配置
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    // 模块只导出被应用的成员
    usedExports: true,
    
    // 压缩输入后果，usedExports开启后会移除未被应用的成员
    // minimize: true,

    // 尽可能合并每一个模块到一个函数中（Scop Hosting）
    concatenateModules: true,
  }
}

Tree Shaking和Babel（未完待续）

据说是用babel时，tree shaking会生效？

  • tree shaking前提是 ESM Modules，由webpack打包的代码必须是用EMS
  • babel preset-env这个插件就是将es6+转换为es5，而且它是将ESM => 转换为CommonJS的形式，导致tree shaking生效（Babel到底是将什么ESM转换为CommonJS，待梳理~~~）
  • 最新版本的Babel主动敞开了 ESM 转换插件，ESM并没有转换；所以tree shaking能够失常工作。
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // 如果 Babel 加载模块时曾经转换了 ESM，则会导致 Tree Shaking 生效；最新版本的Babel主动敞开了 ESM 转换插件
              // ['@babel/preset-env', { modules: 'commonjs' }] // 强制将ESM转换为CommonJS，tree shaking生效
              // ['@babel/preset-env', { modules: false }] // 强制敞开转换插件
              // 也能够应用默认配置，也就是 auto，这样 babel-loader 会主动敞开 ESM 转换
              ['@babel/preset-env', { modules: 'auto' }]
            ]
          }
        }
      }
    ]

Tree Shaking与sideEffects（未完待续，应用场景待钻研）

sideEffects应用场景：

如果有定义了很多模块（例如多个组件），但实际上只应用了一个；打包的时候须要删除多余的代码，能够用sideEffects配置。

  • 生产环境下主动启用
  • 开发环境下如下配置

sideEffects配置

webpack.config.js 下的配置

  // webpack.config.js 下的配置
  optimization: {
    sideEffects: true,//关上移除未应用的模块
  }

package.json下的配置：

// package.json的配置和webpack下的配置意义不同，此处只是标识代码没有副作用
"sideEffects": false // 标识代码没有副作用，webpack在打包时会删掉有副作用的代码

6.2 多入口打包 => 解决文件过大的问题

计划1：多个html-webpack-plugin

  • 依赖：
> npm install html-webpack-plugin --save-dev
  • 性能：
    entry 定义多个入口并应用多个 HtmlWebpackPlugin() 插件；具体参考示例源码；

计划2：应用auto-web-plugin插件依照目录生成html

  • 依赖：
> npm install auto-web-plugin --save-dev
  • 性能：（未完待续）
// ...

6.3 CodeSplit代码分片，按需加载 => 解决文件过大的问题

  • 依赖：无
  • 性能：应用动静加载语句：import(‘./components/banner.js’).then(banner => {})
  • 实际：通常和路由相结合，不须要其余配置

const render = () => {
  const hash = window.location.hash || '#posts'
  const mainElement = document.querySelector('.main')
  mainElement.innerHTML = ''

  if (hash === '#posts') {
    // mainElement.appendChild(posts())
    // /* webpackChunkName: 'components' */为魔法正文，可用将两个模块合并到同一个文件名中
    import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
      mainElement.appendChild(posts())
    })
  } else if (hash === '#album') {
    // mainElement.appendChild(album())
    import(/* webpackChunkName: 'components' */''./album/album').then(({ default: album }) => {
      mainElement.appendChild(album())
    })
  }
}

render()

window.addEventListener('hashchange', render)
  • 配合VUE-ROUTER示例：（未完待续）
const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]

6.4 splitChunks，提取js公共代码

  • 依赖：无，间接在optimization中配置
  • 性能：取代了webpack4中的CommonsChunkPlugin，默认值是按需加载的 chunks；参考：https://webpack.docschina.org/plugins/split-chunks-plugin/
optimization: {
    splitChunks: {
        // 主动提取所有公共模块到独自 bundle；可选配置有：all，async 和 initial。
        // 设置为 all 可能特地弱小，因为这意味着 chunk 能够在异步和非异步 chunk 之间共享
        chunks: 'all'
    }
},

6.5 MiniCssExtractPlugin，提取CSS到单个文件

  • 依赖：
> npm install mini-css-extract-plugin --save-dev             => 将款式寄存到独自的css文件中，取代style-loader
> npm install optimize-css-assets-webpack-plugin --save-dev  => 手动关上css压缩代码
> npm install terser-webpack-plugin --save-dev               => 手动关上js压缩代码
  • 性能：
  1. 将css代码寄存到独自的css文件中，是否也能够合并css文件？（待钻研：https://webpack.docschina.org/plugins/mini-css-extract-plugin/）
  2. 配合css-loader，不再须要style-loader；
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// ...

  optimization: {
    minimizer: [// 应用了minimizer，webpack认为不再启动主动压缩js代码
      new TerserWebpackPlugin(),            //手动关上js压缩代码
      new OptimizeCssAssetsWebpackPlugin()  //手动关上css压缩代码
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader', // 将款式通过 style 标签注入
          MiniCssExtractPlugin.loader, // 将款式寄存到独自的css文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    ...，
    new MiniCssExtractPlugin()
  ]

6.6 ExtractTextPlugin、MiniCssExtractPlugin哪个更好用？

  1. MiniCssExtractPlugin基于 webpack v4 的新个性（模块类型）构建，并且须要 webpack 4 能力失常工作。

  2. 与 extract-text-webpack-plugin 相比，MiniCssExtractPlugin：

    https://webpack.docschina.org/plugins/mini-css-extract-plugin/

  3. 异步加载
  4. 没有反复的编译（性能）
  5. 更容易应用
  6. 特地针对 CSS 开发

6.7 文件名hash，解决缓存带来的问题

webpack中有三种hash：

  1. 我的项目级别：filename: ‘[name]-[hash].bundle.js’ —— 我的项目中任何改变都会批改hash
  2. Chunk级别：filename: ‘[name]-[chunkhash].bundle.js’ —— 同一路chunk改变会批改hash
  3. 内容级别：filename: ‘[name]-[contenthash].bundle.js’ —— 文件发生变化时才会扭转hash

最佳计划： 应用contenthash:8，并且前面能够指定位数：8位。

  output: {
    filename: '[name]-[contenthash:8].bundle.js'
  },
  ...
  plugins: [
    ...,
    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash:8].bundle.css'
    })
  ]

6.8 Happypack：多线程并行打包

webpack4 之后举荐应用 thread-loader；而且 happypack 曾经没怎么保护了，和 vue-loader 配合也会有一些配置问题；

6.9 其它进步构建性能的计划

官网倡议：https://webpack.docschina.org/guides/build-performance/

如何对webpack构建性能进行剖析：

参考文档：https://juejin.cn/post/6911519627772329991

> npm install --save-dev speed-measure-webpack-plugin  => 剖析 webpack 打包速度
> npm install --save-dev webpack-bundle-analyzer       => 剖析 webpack 打包模块大小

晋升构建速度计划（次要的几个）：

  1. 通过应用 include 字段减小打包范畴
  2. 应用 DllPlugin 为更改不频繁的代码生成独自的打包文件；配置参考：https://webpack.docschina.org/plugins/dll-plugin/
  3. 多应用分片按需加载性能，SplitChunksPlugin 配置；
  4. 应用 thread-loader，性能相似于happypack；创立多线程打包，配置参考：https://webpack.docschina.org/loaders/thread-loader/#root
1. 请仅在耗时的操作中应用 thread-loader，因为：在 worker 池中运行的 loader 是受到限制的；具体参考文档。
2. 不要应用太多的 worker，因为 Node.js 的 runtime 和 loader 都有启动开销。最小化 worker 和 main process(主过程) 之间的模块传输。过程间通信(IPC, inter process communication)是十分耗费资源的。
  1. 应用配置项：cache，缓存生成的 webpack 模块和 chunk，来改善构建速度。cache 会在开发 模式被设置成 type: ‘memory’ 而且在 生产 模式 中被禁用。 参考：https://webpack.docschina.org/configuration/other-options/#cache
  2. 开发阶段尽量应用 webpack-dev-server 在内存中构建
  3. 配置 devTool 生成映射文件时抉择适合的选项
  4. // …

7. 示例代码

https://gitee.com/ymcdhr/e-demo/tree/master/webpack-sample

8. 参考资料：

https://webpack.docschina.org/guides/
https://webpack.docschina.org/guides/build-performance/

特地鸣谢：拉勾教育前端高薪训练营

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章