webpack优化提升

安装webpack相关内容

• npm init -y，自动建立package.json
• npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D

向下兼容游览器-@babel/polyfill

• 某些代码在低版本游览器无法兼容使用
  

• 采用@babel/polyfill兼容

• 步骤一：先安装

• npm i @babel/polyfill -D

• 页面导入
  

• npx webpack打包后最终效果

• 很多很多的内容，是因为把游览器许多需要优雅降级的一些包都打在这个项目里面了
  

进一步优化@babel/polyfill

• 原因：import @babel/polyfill，这样是全局引入整个polyfill包，包体积大，会污染全局环境

• 采取这个方式

• npm i exports-loader -D

• npm install core-js@3
  

• 最后页面上删除import @babel/polyfill即可，npx webpack即可

模块联邦-共享模块

• 直接将一个应用的包应用于另一个应用
• 同时具备整体应用以及打包的能力
  

• 两者的webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入模块联邦
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin(),
    //实例化一下
    new ModuleFederationPlugin({
      name: 'nav', //标识联邦模块的名字，别的应用访问这个组件就要通过这个名字
      filename: 'remoteEntry.js', //这个远端使用这个模块的名字
      remotes: {}, //引用其他的联邦模块
      exposes: {
        //暴露组件
        './Header': './src/Header.js', //./Header代表到时候别人用的时候基于这个路径拼接url
      },
      shared: {},
    }),
  ],
};

• 内容调用

如何提升构建性能

通用环境下

1，webpack更新到最新版本

2，将loader应用于最少数量的必要模块

3，引导（每个额外的loader/plugin都有其启动时间，尽量少使用工具

4，解析

5，小即是快

6，持久化缓存

7，自定义plugin/loader

8，progress plugin

9，dll

• 注意使用dll的时候，必须先安装jquery

const path = require('path');
const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    jquery: ['jquery'],
  },
  output: {
    filename: '[name.js]',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.resolve(__dirname, 'dll/manifest.json'),
    }),
  ],
};

• 然后package.json里配置一下
  
• 运行时间就会降低了
  
  
• 注意，此时提升了构建速度，但画面是不行的
• 要再配置一下webpack.config.js
  

10，worker池

• 注意，不要使用太多的worker，因为node.js的runtime和loader都有启动开销，启动会消耗时间
• 当遇到比较大的进程，再使用
• npm i thread-loader -D
• 在webpack.config.js中

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          //使用worker池分流
          {
            loader: 'thread-loader',
            options: {
              workers: 2,
            },
          },
          {
            //目的，解析一些es6的代码
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
};

开发环境下

1，增量编译

2，在内存中编译

3，stats.to.Json加速

4，Devtool

5，避免在生产环境才用到的工具

6，最小化 entry chunk

7，避免额外的优化步骤

8,输出结果不携带路径信息

9，Node.js版本问题

TypeScript Loader

生产环境下

不启用sourcMap