Webpack性能优化「七」-- 优化产出代码 ***

本篇讲的是 Webpack 对于优化产出代码，也就是对于产品性能的优化，

优点：代码体积更小；合理分包不重复加载；速度更快，内存使用更少。

懒加载 import
提取公共代码
IgnorePlugin 避免引入无用模块
小图片base64编码 // 减少请求次数
bundle加hash
使用 CDN加速
使用 production
Scope Hosting 作用域提升

小图片base64编码 减少请求次数

webpack.prod.js：

module: {
  rules: [
    // 图片 - 考虑 base64 编码的情况
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          // 小于 5kb 的图片用 base64 格式产出
          // 否则，依然延用 file-loader 的形式，产出 url 格式
          limit: 5 * 1024,

          // 打包到 img 目录下
          outputPath: '/img1/',

          // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
          // publicPath: 'http://cdn.abc.com'
        }
      }
    },
  ]
},

bundle加hash [缓存]

webpack.prod.js：

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
  path: distPath,
},

使用CDN加速

webpack.prod.js：
① 修改所有静态文件 url 的前缀（如 cdn 域名）

output: {
  filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
  path: distPath,
  publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名）]
},

② 将html中的js文件和css文件上传到cdn上去

使用production 模式

webpack.prod.js：
mode: 'production', //webpack4.0+

• 1.自动开启代码压缩
• 2.Vue、React 等会自动删除调试代码（如开发环境的warning）
• 3.启动 Tree-Shaking

Tree-Shaking 通常用于描述移除 JavaScript 上下文中的未引用代码;
它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。

知识延伸：ES6 Module 和 Commonjs (Node )区别

• ES6 Module 静态引入，编译时引入
• Commonjs 动态引入，执行时引入
• 只有 ES6 Module 才能静态分析，实现Tree-Shaking

Scope Hosting 作用域提升

背景：

过去捆绑时webpack的权衡之一是捆绑中的每个模块都将包裹在单独的函数闭包中。这些包装函数使您的JavaScript在浏览器中执行的速度变慢。多个文件打包后，产生多个函数，
Scope Hosting 可以“提升”或将所有模块的作用域统一，从而使代码在浏览器中的执行时间更快。

优点：
代码体积更小
创建函数作用域更少
代码可读性更好

Scope Hosting 开启条件：
必须使用ES6模块化语言组织的代码才能实现Scope Hosting效果
所以针对Npm中的第三方模块优先采用 jsnext:main 中指向 ES6模块发语法的文件

配置 webpack.prod.js：
① 引用 ModuleConcatenationPlugin 插件

const ModuleConcatenationPlugin = require('webpack/lib/ModuleConcatenationPlugin');

② 针对Npm中的第三方模块优先采用 jsnext:main 中指向 ES6模块发语法的文件

resolve:{
  mainFields:['jsnext:main','bromser','main']
},

③ 开启 Scope Hosting，在plugins中实例：

plugins:[
  new ModuleConcatenationPlugin(),
]