Guide d'optimisation des versions de packaging Vue-cli et Webpack

Avec le développement continu de la technologie front-end Web, Vue.js est devenu un framework front-end très populaire. Vue-cli et Webpack dans Vue.js sont également devenus des outils de support nécessaires en tant qu'outils de construction. Lors du développement de projets, nous utilisons généralement Vue-cli pour créer le cadre d'application et utilisons Webpack pour empaqueter et publier le projet. Cependant, lors du processus de packaging et de publication de grands projets, en raison de la grande taille du projet, des problèmes tels qu'une vitesse de compilation lente, un volume de packaging important et une vitesse d'accès lente peuvent survenir. Afin d'éviter ces problèmes, cet article présentera. Packaging Vue-cli et Webpack. Guide d'optimisation des versions pour aider les développeurs à mieux optimiser les effets de publication des grands projets.

1. Optimisation du projet Vue-cli

1. Introduire des composants tiers à la demande

Pendant le processus de développement, nous utilisons généralement des bibliothèques tierces telles que jQuery, Bootstrap, Echarts, etc., mais en introduisant la bibliothèque entière peut entraîner un volume d'emballage excessif. Gros problème d'accès lent. Par conséquent, nous pouvons utiliser le plug-in babel-plugin-component pour l'introduire à la demande. babel-plugin-component 插件来进行按需引入。

在 babel.config.js 中设置：

plugins: [
  ['component', {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }]
]

这里以 Element-ui 为例，使用插件按需引入库，可以大大减少打包体积。

2. 配置 Webpack 属性

我们可以通过修改 vue.config.js 文件来修改 Webpack 的配置属性。以下是一些常用的 Webpack 属性的配置方法：

// 修改输出文件名格式
output: {
  filename: '[name].[hash].js'
}

// 修改 publicPath
publicPath: process.env.NODE_ENV === 'production' ?
  '/production-sub-path/' : '/'

// 压缩代码
uglifyOptions: {
  compress: {
    warnings: false,
    drop_console: true,
    drop_debugger: true,
    dead_code: true
  }
}

// 配置 externals，将大型的第三方库从打包代码中剥离
externals: {
  'vue': 'Vue',
  'jquery': 'jQuery',
  'bootstrap': 'Bootstrap',
  'echarts': 'echarts',
  'moment': 'moment'
}

// 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小
configureWebpack: {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

二、Webpack 优化

1. 使用多线程构建

使用多线程构建可以大大提高打包速度，可以使用 happypack 插件来实现多线程构建。使用该插件需要先安装 happypack：

npm install happypack -D

接下来将原来的配置文件:

module: {
  rules: [
    {
      test: /.js$/,
      loader: 'babel-loader'
    },
    ...
  ]
}

修改为：

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      loader: 'happypack/loader?id=happyBabel'
    },
    ...
  ]
},
plugins: [
  new HappyPack({
    id: 'happyBabel',
    loaders: ['babel-loader'],
    threadPool: happyThreadPool,
    verbose: true
  })
]

这里使用 happypack 插件来启用多线程构建。

2. 使用 DllPlugin 和 DllReferencePlugin 技术

DllPlugin 和 DllReferencePlugin 技术主要是将一些不经常变动的库单独打包成一个 lib 文件，这样在每次打包时就不用再去打包这些库文件，只需要在之后使用 DllReferencePlugin 进行引入即可。

使用方法：

1. 先配置 DllPlugin：

const path = require('path');
const webpack = require('webpack');
const dllPath = 'static/dll';

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库
  },
  output: {
    path: path.join(__dirname, `../${dllPath}`),
    filename: '[name].dll.js',
    library: '[name]_[hash]'  // 暴露全局变量，避免前后两次打包，库名字变更
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, `../${dllPath}`, 'manifest.json')
    })
  ]
};

2. 执行打包：

cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules

3. 在 index.html 中使用 <script>
Défini dans babel.config.js :

<script src="<%= BASE_URL %>static/dll/vendor.dll.js"></script>

En prenant Element-ui comme exemple, l'utilisation de plug-ins pour introduire des bibliothèques à la demande peut réduire considérablement le volume d'emballage .
4. Configuration des propriétés du Webpack
   Nous pouvons modifier les propriétés de configuration du Webpack en modifiant le fichier vue.config.js. Voici quelques méthodes de configuration des attributs Webpack couramment utilisées :

   const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
   const path = require('path');
   
   plugins: [
     new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: require(path.join(__dirname, './static/dll/manifest.json'))
     }),
     new AddAssetHtmlWebpackPlugin({
       filepath: path.resolve(__dirname, './static/dll/*.dll.js')
     })
   ]

   Copier après la connexion
   2. Optimisation du Webpack
   🎜Utiliser une version multithread🎜🎜🎜L'utilisation d'une version multithread peut grandement améliorer la vitesse d'empaquetage, vous pouvez utiliser le happypack plug-in pour implémenter des builds multithread. Pour utiliser ce plug-in, vous devez d'abord installer <code>happypack : 🎜rrreee🎜 Puis modifier le fichier de configuration d'origine : 🎜rrreee🎜 en : 🎜rrreee🎜Ici, utilisez le happypack plug-in pour activer la construction multi-thread. 🎜
   🎜Utilisez la technologie DllPlugin et DllReferencePlugin🎜🎜🎜La technologie DllPlugin et DllReferencePlugin regroupe principalement certaines bibliothèques qui ne changent pas fréquemment dans un fichier lib, afin que vous n'ayez pas à les empaqueter à chaque fois que vous emballez Les fichiers de bibliothèque ne doivent être introduits que ultérieurement à l'aide de DllReferencePlugin. 🎜🎜Utilisation : 🎜🎜🎜Configurez d'abord DllPlugin : 🎜🎜rrreee
   🎜Exécuter l'empaquetage : 🎜🎜rrreee
   🎜Dans index.html Utiliser <script> pour introduire le fichier de bibliothèque généré : 🎜🎜rrreee🎜🎜Configurer DllReferencePlugin : 🎜🎜rrreee🎜Ce plug-in peut introduire automatiquement le fichier Dll généré dans la page. 🎜🎜Résumé : 🎜🎜Grâce aux méthodes ci-dessus, nous pouvons optimiser Vue-cli et Webpack pour rendre le packaging de notre projet plus petit et plus rapide. Bien entendu, la méthode ci-dessus n’est pas une solution miracle et la méthode d’optimisation spécifique doit être ajustée en fonction des conditions spécifiques du projet. J'espère que cet article pourra être utile à tout le monde lors de la création et de la publication de projets. 🎜

   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!