Leitfaden zur Optimierung der Verpackungsfreigabe für Vue-cli und Webpack

Mit der kontinuierlichen Weiterentwicklung der Web-Front-End-Technologie hat sich Vue.js zu einem sehr beliebten Front-End-Framework entwickelt. Vue-cli und Webpack in Vue.js sind ebenfalls zu notwendigen unterstützenden Tools als Build-Tools geworden. Bei der Entwicklung von Projekten verwenden wir normalerweise Vue-cli zum Erstellen des Anwendungsframeworks und Webpack zum Verpacken und Veröffentlichen des Projekts. Beim Packen und Freigeben großer Projekte können jedoch aufgrund der Größe des Projekts Probleme wie langsame Kompilierungsgeschwindigkeit, großes Paketvolumen und langsame Zugriffsgeschwindigkeit auftreten. Um diese Probleme zu vermeiden, wird dieser Artikel vorgestellt Leitfaden zur Release-Optimierung für Vue-cli und Webpack, um Entwicklern dabei zu helfen, die Release-Effekte großer Projekte besser zu optimieren.

1. Vue-cli-Projektoptimierung

1. Einführung von Komponenten von Drittanbietern bei Bedarf

Während des Entwicklungsprozesses verwenden wir normalerweise Bibliotheken von Drittanbietern wie jQuery, Bootstrap, Echarts usw., führen jedoch die gesamte Bibliothek ein kann dazu führen, dass das Verpackungsvolumen zu groß wird. Großes, langsames Zugriffsproblem. Daher können wir das Plug-in babel-plugin-component verwenden, um es bei Bedarf einzuführen. 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>
Eingestellt in babel.config.js:

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

Am Beispiel von Element-ui kann die Verwendung von Plug-Ins zum Einführen von Bibliotheken bei Bedarf das Verpackungsvolumen erheblich reduzieren .
4. Webpack-Eigenschaften konfigurieren
   Wir können die Konfigurationseigenschaften von Webpack ändern, indem wir die Datei vue.config.js ändern. Im Folgenden sind einige häufig verwendete Methoden zur Konfiguration von Webpack-Attributen aufgeführt:

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

   2. Webpack-Optimierung
   🎜Multithread-Build verwenden🎜🎜🎜Die Verwendung von Multithread-Build kann die Verpackungsgeschwindigkeit erheblich verbessern. Sie können den happypack Plug-in Implementieren Sie Multithread-Builds. Um dieses Plug-in zu verwenden, müssen Sie zuerst <code>happypack installieren: 🎜rrreee🎜 Dann ändern Sie die ursprüngliche Konfigurationsdatei: 🎜rrreee🎜 in: 🎜rrreee🎜Verwenden Sie hier den happypack Plug-in zur Aktivierung von Multithreading Build. 🎜
   🎜Verwenden Sie die DllPlugin- und DllReferencePlugin-Technologie🎜🎜🎜DllPlugin- und DllReferencePlugin-Technologie packen hauptsächlich einige Bibliotheken, die sich nicht häufig ändern, in eine lib-Datei, sodass Sie sie nicht jedes Mal packen müssen Dateien müssen später nur noch mit DllReferencePlugin eingefügt werden. 🎜🎜Verwendung: 🎜🎜🎜DllPlugin zuerst konfigurieren: 🎜🎜rrreee
   🎜Paketierung ausführen: 🎜🎜rrreee
   🎜In index.html Verwendung <script> zum Einführen der generierten Bibliotheksdatei: 🎜🎜rrreee🎜🎜DllReferencePlugin konfigurieren: 🎜🎜rrreee🎜Dieses Plug-in kann die generierte DLL-Datei automatisch in die Seite einführen. 🎜🎜Zusammenfassung: 🎜🎜Durch die oben genannten Methoden können wir Vue-cli und Webpack optimieren, um unsere Projektverpackung kleiner und schneller zu machen. Natürlich ist die obige Methode kein Allheilmittel, und die spezifische Optimierungsmethode muss an die spezifischen Bedingungen des Projekts angepasst werden. Ich hoffe, dass dieser Artikel für alle beim Verpacken und Veröffentlichen von Projekten hilfreich sein kann. 🎜

   Das obige ist der detaillierte Inhalt vonLeitfaden zur Optimierung der Verpackungsfreigabe für Vue-cli und Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!