Guide d'optimisation des versions de packaging Vue-cli et Webpack-Voir.js-php.cn

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

WBOY

Libérer： 2023-06-09 16:05:45

original

1007 Les gens l'ont consulté

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

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'
  }]
]

Copier après la connexion

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

配置 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()
  ]
}

Copier après la connexion

二、Webpack 优化

使用多线程构建

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

npm install happypack -D

Copier après la connexion

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

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

Copier après la connexion

修改为：

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
  })
]

Copier après la connexion

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

使用 DllPlugin 和 DllReferencePlugin 技术

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

使用方法：

先配置 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')
    })
  ]
};

Copier après la connexion

执行打包：

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

Copier après la connexion

在 index.html 中使用 <script>

babel.config.js

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

Copier après la connexion

Element-ui

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. 🎜
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!