一、优化产出代码

  1. 优化体积小，加载快
  2. 合理分包，不重复加载
  3. 程序运行速度更快，内存占用更小

1.1 优化产出代码体积、提高加载速度

方法一：将img图片通过url-loader转Base64格式:::info

  1. 通过 url-loader 中的limit属性判断：

如果图片过大，发起http请求获取图片，
图片小的话，就将图片转化为base64格式的字符串

  1. url-loader + file-loader 结合工作 ::: 方法二：产出的 bundle文件 加上 hash 值javascript module.exports = { output: { // hash值 取前八位 filename: '[name].[contentHash:8].js', // or: filename: '[name].[hash:8].js' path: distPath } }
    1. hash 值 是根据 打包的文件内容添加的
    2. 内容不变，hash不变，内容变化hash变化
    3. 添加 hash 有利于网页对 js 的加载

原因： :::info

  1. 文件名不变，在浏览器中有一个缓存机制
  2. 源代码变化，缓存的文件名没变化，从缓存中取文件

  3. 不会再发起http请求（304）重定向 ::: 方法三：懒加载:::info

  4. 通过import（）语法实现懒加载效果

  5. webpack 默认会将异步代码，分割成一个代码块
  6. 通过 () => import(xx)方式，用到时，执行函数，发起http请求分割的 bundle 文件 ::: 方法四：代码分割 splitChunks> 1. 不同模块中的 import ‘lodash’ 相同时，import 引入的lodash 放入一个共同的 vendors 文件中
    1. 不同模块用到时，直接到 vendors 文件中去取，减少打包的代码体积

:::info 不使用代码分割：

  1. 每一个模块引入一个相同的包import _ from 'lodash';
  2. 再webpack对每一个模块进行打包时，lodash这个包打包了多次，增加产出代码体积 ::: 方法五：将文件放入 cdn 进行加速配置javascript module.exports = { output: { // 在每一个 <script src="xxx"> 文件名加上 // http://cdn.test.com publicPath: 'http://cdn.test.com' } } image.png
    image.png 方法六：将 mode模式 开启为 production 模式
    1. 开启 production 生产模式 :::info
  • 在 vue 和 react 包中，最终打包时，将告警 **warn** 提示代码进行删除，优化代码产出的体积

image.png

  • 会默认开启 Tree Shaking 格式化，import ‘xx’ 打包使用的代码

  • :::

二、解析

2.1 Scope Hosisting

2.1.1 概念> 不使用 scope-hosisting 时，打包的每一个模块作为一个独立的作用域函数，一个模块引用另一个模块，被打包成从一个函数作用域中使用其局部作用域变量

影响性能


:::info 使用 scope 配置，将引用和并成一个函数，从函数内部取变量，提高性能 ::: 2.1.2 使用

  1. 从webpack内部引入方法

（v4.41.2之后版本默认配置好）
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')
image.png

  1. 使用插件

plugins: [ new ModuleConcatenationPlugin() ]

  1. resolve 配置

resolve: { mainFields: ['jsnext:main', 'browser', 'main'] } :::info 引入模块时：
‘jsnext:main’: 表示优先引用 es6 第三方模块化规范 :::