Ausführliche Erläuterung der Verpackungsoptimierung mit webpack4.0

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von Webpack 4.0 zum Packen und Optimieren geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von Webpack 4.0 zum Packen und Optimieren? sehen.

Einführung in neue Funktionen von webapck4 – Referenzmaterialien

Aktuelle abhängige Paketversionen

1. Optimieren Sie den Loader Konfiguration

1.1 Den Dateiübereinstimmungsbereich eingrenzen (einschließen/ausschließen)

Den Loader-Ladesuchbereich eingrenzen, indem Dateien unter node_modules ausgeschlossen werden. Treffer mit hoher Wahrscheinlichkeit Datei

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/, // 排除不处理的目录
        include: path.resolve(dirname, 'src') // 精确指定要处理的目录
      }
    ]
  }

1.2 Cache-Loader-Ausführungsergebnisse (cacheDirectory)

cacheDirectory ist eine spezifische Option des Loaders und der Standardwert ist false. Das angegebene Verzeichnis (Verwendung: „babel-loader?cacheDirectory=cacheLoader“) wird zum Zwischenspeichern der Ausführungsergebnisse des Loaders verwendet, wodurch der Babel-Neukompilierungsprozess während der Webpack-Erstellung reduziert wird. Wenn auf einen leeren Wert (verwenden Sie: 'babel-loader?cacheDirectory') oder auf true (verwenden Sie: 'babel-loader?cacheDirectory=true') gesetzt ist, wird das Standard-Cache-Verzeichnis (node_modules/.cache/babel-loader) verwendet. Wenn in: Wenn das Verzeichnis node_modules in keinem Stammverzeichnis gefunden wird, wird es heruntergestuft und auf das standardmäßige temporäre Dateiverzeichnis des Betriebssystems zurückgegriffen.

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader?cacheDirectory', // 缓存loader执行结果 发现打包速度已经明显提升了
      exclude: /node_modules/,
      include: path.resolve(dirname, 'src')
    }
  ]
}

2.Konfiguration der Auflösungsoptimierung

2.1 Suchpfad des Optimierungsmoduls „resolve.modules“

Resolve.modules von Webpack konfiguriert den Speicherort der Modulbibliothek (d. h. node_modules). Wenn import 'vue' in js erscheint, was weder ein relativer noch ein absoluter Pfad ist, wird es im Verzeichnis node_modules gefunden. Die Standardkonfiguration wird jedoch durch eine aufwärts gerichtete rekursive Suche gefunden. Normalerweise befindet sich jedoch nur ein Knotenmodul im Projektstammverzeichnis. Um den Suchbereich zu reduzieren, können Sie den vollständigen Pfad direkt angeben node_modules; in ähnlicher Weise sollte für die Konfiguration von Aliasen (Alias) dasselbe getan werden:

const path = require('path');
function resolve(dir) { // 转换为绝对路径
  return path.join(dirname, dir);
}
resolve: {
  modules: [ // 优化模块查找路径
    path.resolve('src'),
    path.resolve('node_modules') // 指定node_modules所在位置 当你import 第三方模块时 直接从这个路径下搜索寻找
  ]
}

Nachdem Sie den Speicherort des src-Verzeichnisses konfiguriert haben, da sich das util-Verzeichnis innerhalb von src befindet, Sie können die folgende Methode verwenden, um die Tools in util einzuführen. Funktion

// main.js
import dep1 from 'util/dep1';
import add from 'util/add';

2.2 „resolve.alias“ Pfad-Alias ​​konfigurieren

Erstellen Sie einen Pfad-Alias ​​für den Import oder erfordern Sie, um dies sicherzustellen Die Moduleinführung wird einfacher. Das Konfigurationselement ordnet den ursprünglichen Importpfad über Aliase einem neuen Importpfad zu. Diese Optimierungsmethode wirkt sich auf die Verwendung von Tree-Shaking aus, um ungültigen Code zu entfernen

Zum Beispiel einige gängige Module im Ordner src/:

alias: {
 Utilities: path.resolve(dirname, 'src/utilities/'),
 Templates: path.resolve(dirname, 'src/templates/')
}

Anstatt jetzt beim Importieren relative Pfade zu verwenden, gehen Sie wie folgt vor:

import Utility from '../../utilities/utility';

Sie können Aliase wie diesen verwenden:

import Utility from 'Utilities/utility';

resolve: {
  alias: { // 别名配置 通过别名配置 可以让我们引用变的简单
    'vue$': 'vue/dist/vue.common.js', // $表示精确匹配
    src: resolve('src') // 当你在任何需要导入src下面的文件时可以 import moduleA from 'src/moduleA' src会被替换为resolve('src') 返回的绝对路径 而不需要相对路径形式导入
  }
}

Auch im Kontext eines bestimmten Objekts Hinzufügen $ am Ende nach dem Schlüssel, um eine genaue Übereinstimmung anzugeben:

alias: {
  util$: resolve('src/util/add.js')
}

Dies führt zu den folgenden Ergebnissen:

import Test1 from 'util'; // 精确匹配，所以 src/util/add.js 被解析和导入
import Test2 from 'util/dep1.js'; // 精确匹配，触发普通解析 util/dep1.js

2.3resolve.extensions

Wenn das Modul kein Dateisuffix hat, analysiert Webpack automatisch das ermittelte Dateisuffix gemäß dieser Konfiguration

1. Die Suffixliste sollte so klein wie möglich sein

2. Das häufigste Präfix

3. möglichst mit dem Suffix

resolve: {
  extensions: ['.js', '.vue']
}

3. module.noParse

Module, die noParse verwenden, werden von Loadern nicht geparst. Wenn die von uns verwendete Bibliothek also zu groß ist und keine Import-Require- und Define-Aufrufe enthält, können wir sie verwenden Lassen Sie diese Konfiguration zur Verbesserung der Leistung das rekursive Parsen einiger Dateien ignorieren, die keine Modularisierung verwenden.

// 忽略对jquery lodash的进行递归解析
module: {
  // noParse: /jquery|lodash/
  // 从 webpack 3.0.0 开始
  noParse: function(content) {
    return /jquery|lodash/.test(content)
  }
}

4.HappyPack

HappyPack ermöglicht es Webpack, den Ausführungsprozess des Loaders von einem Einzelprozess auf einen Mehrprozessmodus zu erweitern. Das heißt, die Aufgabe wird zur gleichzeitigen Ausführung in mehrere Unterprozesse zerlegt. Nachdem die Unterprozesse die Verarbeitung abgeschlossen haben, werden die Ergebnisse an den Hauptprozess gesendet. Dies beschleunigt die Codekonstruktion und lässt sich besser in Kombination mit DLL-Dynamic-Link-Bibliotheken verwenden.

npm i happypack@next -D

webpack.config.js

const HappyPack = require('happypack');
const os = require('os'); // node 提供的系统操作模块
 // 根据我的系统的内核数量 指定线程池个数 也可以其他数量
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().lenght})
module: {
  rules: [
    {
      test: /\.js$/,
      use: 'happypack/loader?id=babel',
      exclude: /node_modules/,
      include: path.resolve(dirname, 'src')
    }
  ]
},
plugins: [
  new HappyPack({ // 基础参数设置
    id: 'babel', // 上面loader?后面指定的id
    loaders: ['babel-loader?cacheDirectory'], // 实际匹配处理的loader
    threadPool: happyThreadPool,
    // cache: true // 已被弃用
    verbose: true
  });
]

happypack提供的loader，是对文件实际匹配的处理loader。这里happypack提供的loader与plugin的衔接匹配，则是通过id=happypack来完成。

npm run dev

5.DLL动态链接库

在一个动态链接库中可以包含其他模块调用的函数和数据，动态链接库只需被编译一次，在之后的构建过程中被动态链接库包含的模块将不会被重新编译,而是直接使用动态链接库中的代码。

1. 将web应用依赖的基础模块抽离出来，打包到单独的动态链接库中。一个链接库可以包含多个模块。

2. 当需要导入的模块存在于动态链接库，模块不会再次打包，而是去动态链接库中去获取。

3. 页面依赖的所有动态链接库都需要被加载。

5.1 定义DLL配置

依赖的两个内置插件：DllPlugin 和 DllReferencePlugin

5.1.1 创建一个DLL配置文件webpack_dll.config.js

module.exports = {
  entry: {
    react: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js', // 动态链接库输出的文件名称
    path: path.join(dirname, 'dist'), // 动态链接库输出路径
    libraryTarget: 'var', // 链接库(react.dll.js)输出方式 默认'var'形式赋给变量 b
    library: '_dll_[name]_[hash]' // 全局变量名称 导出库将被以var的形式赋给这个全局变量 通过这个变量获取到里面模块
  },
  plugins: [
    new webpack.DllPlugin({
      // path 指定manifest文件的输出路径
      path: path.join(dirname, 'dist', '[name].manifest.json'),
      name: '_dll_[name]_[hash]', // 和library 一致，输出的manifest.json中的name值
    })
  ]
}

5.1.2 output.libraryTarget 规定了以哪一种导出你的库  默认以全局变量形式 浏览器支持的形式

具体包括如下：

1. "var" - 以直接变量输出(默认library方式) var Library = xxx (default)

2. "this" - 通过设置this的属性输出 this["Library"] = xxx

3. "commonjs" - 通过设置exports的属性输出 exports["Library"] = xxx

4. "commonjs2" - 通过设置module.exports的属性输出 module.exports = xxx

5. "amd" - 以amd方式输出

6. "umd" - 结合commonjs2/amd/root

5.1.3 打包生成动态链接库

webpack --config webpack_dll.config.js --mode production

在dist目录下 多出react.dll.js 和 react.manifest.json

1. react.dll.js 动态链接库 里面包含了 react和react-dom的内容

2. react.manifest.json 描述链接库(react.dll)中的信息

5.2 在主配置文件中使用动态链接库文件

// webpack.config.js
const webpack = require('webpack');
plugins: [
  // 当我们需要使用动态链接库时 首先会找到manifest文件 得到name值记录的全局变量名称 然后找到动态链接库文件 进行加载
  new webpack.DllReferencePlugin({
    manifest: require('./dist/react.manifest.json')
  })
]

5.3 将动态链接库文件加载到页面中

需要借助两个webpack插件

html-webpack-plugin 产出html文件

html-webpack-include-assets-plugin 将js css资源添加到html中 扩展html插件的功能

npm i html-webpack-plugin html-webpack-include-assets-plugin -D

配置webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
pluings: [
  new webpack.DllReferencePlugin({
    manifest: require('./dist/react.manifest.json')
  }),
  new HtmlWebpackPlugin({
    template: path.join(dirname, 'src/index.html')
  }),
  new HtmlIncludeAssetsPlugin({
    assets: ['./react.dll.js'], // 添加的资源相对html的路径
    append: false // false 在其他资源的之前添加 true 在其他资源之后添加
  });
]

此时react.dll.js和main.js被自动引入到页面中，并且dll文件在main.js之前加载

6.ParallelUglifyPlugin

这个插件可以帮助有很多入口点的项目加快构建速度。把对JS文件的串行压缩变为开启多个子进程并行进行uglify。

cnpm i webpack-parallel-uglify-plugin -D

// webpck.config.js
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
plugins: [
  new ParallelUglifyPlugin({
    workerCount: 4,
    uglifyJS: {
      output: {
        beautify: false, // 不需要格式化
        comments: false // 保留注释
      },
      compress: { // 压缩
        warnings: false, // 删除无用代码时不输出警告
        drop_console: true, // 删除console语句
        collapse_vars: true, // 内嵌定义了但是只有用到一次的变量
        reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
      }
    }
  });
]

执行压缩

webpack --mode production

7.Tree Shaking

剔除JavaScript中用不上的代码。它依赖静态的ES6模块化语法，例如通过impot和export导入导出

commonJS模块 与 es6模块的区别

commonJS模块：

1.动态加载模块 commonJS 是运行时加载 能够轻松实现懒加载，优化用户体验

2.加载整个模块 commonJS模块中，导出的是整个模块

3.每个模块皆为对象 commonJS模块被视作一个对象

4.值拷贝 commonJS的模块输出和函数的值传递相似，都是值得拷贝

es6模块

1.静态解析 es6模块时 编译时加载 即在解析阶段就确定输出的模块的依赖关系，所以es6模块的import一般写在被引入文件的开头

2.模块不是对象 在es6里，每个模块并不会当做一个对象看待

3.加载的不是整个模块 在es6模块中 一个模块中有好几个export导出

4.模块的引用 es6模块中，导出的并不是模块的值得拷贝，而是这个模块的引用

7.1 保留ES6模块化语法

// .babelrc
{
  "presets": [
    [
      "env", {
        modules: false // 不要编译ES6模块
      },
      "react",
      "stage-0"
    ]
  ]
}

7.2 执行生产编译 默认已开启Tree Shaking

webpack --mode production

什么是Tree Shaking?

有个funs.js 里面有两个函数

// funs.js
export const sub = () => 'hello webpack!';
export const mul = () => 'hello shaking!';

main.js 中依赖funs.js

// main.js
import {sub} from './funs.js'
sub();

在main.js只使用了里面的 sub函数 默认情况下也会将funs.js里面其他没有的函数也打包进来, 如果开启tree shaking 生产编译时

webpack --mode production //此时funs.js中没有被用到的代码并没打包进来 而被剔除出去了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue+Echarts实现点击高亮（附代码）

angular4共享多个组件数据通信案例详解

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verpackungsoptimierung mit webpack4.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!