Comment extraire des bibliothèques tierces avec webpack

Cette fois, je vais vous montrer comment webpack extrait les bibliothèques tierces. Quelles sont les précautions pour que webpack extraie les bibliothèques tierces. Voici des cas pratiques, jetons un coup d'oeil.

Lorsque nous utilisons Webpack pour empaqueter, nous souhaitons souvent extraire la bibliothèque tierce séparément, l'utiliser comme fichier de version stable et utiliser le cache de navigation pour réduire le nombre de requêtes. Il existe deux méthodes couramment utilisées pour extraire des bibliothèques tierces

1. CommonsChunkPlugin

2. DLLPlugin

Différence : La première méthode nécessite que la bibliothèque tierce soit empaquetée une fois à chaque fois qu'elle est empaquetée. La deuxième méthode empaquete uniquement les fichiers du projet à chaque fois. Il suffit de référence la compression tierce empaquetée pour. la première fois. Il suffit de déposer

Méthode CommonsChunkPluginIntroduction

Prenons vue à titre d'exemple

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app'，
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Packagez ensuite le fichier généré et importez-le dans le fichier html

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

Introduction à la méthode DLLPlugin

Préparez d'abord deux fichiers

1. webpack.config.js

2. webpack.dll.config.js

Le fichier webpack.dll.config.js est configuré comme suit

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

Ensuite le fichier webpack.config.js est configuré comme suit

const webpack = require('webpack')
module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

Puis lancez

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

Méthode de citation HTML

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment développer le module JS optimal

Étapes pour mettre en œuvre un site multipage webpack+express développement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!