Vue-cli および Webpack パッケージのリリース最適化ガイド

Web フロントエンド テクノロジの継続的な開発により、Vue.js は非常に人気のあるフロントエンド フレームワークになりました。 Vue.jsのVue-cliやWebpackもビルドツールとして必要なサポートツールとなっています。プロジェクトを開発するとき、通常は Vue-cli を使用してアプリケーション フレームワークを構築し、Webpack を使用してプロジェクトをパッケージ化して公開します。しかし、大規模なプロジェクトをパッケージ化してリリースする過程では、プロジェクトのサイズが大きいため、コンパイル速度が遅い、パッケージング容量が大きい、アクセス速度が遅いなどの問題が発生する可能性があります。 Vue-cli および Webpack パッケージ化: 開発者が大規模プロジェクトのリリース効果をより適切に最適化できるようにするリリース最適化ガイド。

1. Vue-cli プロジェクトの最適化

1. オンデマンドでのサードパーティ コンポーネントの導入

開発プロセスでは、通常、jQuery、Bootstrap、 Echarts などのサードパーティ ライブラリですが、ライブラリ全体を導入すると、過剰なパッケージ サイズやアクセス速度の低下などの問題が発生する可能性があります。したがって、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()
  ]
}

2. 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 プラグインを使用して、マルチスレッド ビルドを有効にします。

DllPlugin および DllReferencePlugin テクノロジの使用

DllPlugin および DllReferencePlugin テクノロジは主に、頻繁に変更されないいくつかのライブラリを lib ファイルにパッケージ化するため、パッケージ化されるたびに、これらのライブラリ ファイルをパッケージ化する必要はありません。後で導入するために DllReferencePlugin を使用するだけです。

使用法:

最初に DllPlugin を構成します:

1. 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 の 3f1c4e4b6b16bbbd69b2ee476dc4f83a を使用して、生成されたライブラリ ファイルを導入します:

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

DllReferencePlugin を構成します:
4. #

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

このプラグインは、生成された Dll ファイルをページに自動的に導入できます。

概要:

上記の方法を通じて、Vue-cli と Webpack を最適化し、プロジェクトのパッケージ化をより小さく、より速くすることができます。もちろん、上記の方法は特効薬ではなく、具体的な最適化方法はプロジェクトの特定の条件に応じて調整する必要があります。この記事がプロジェクトをパッケージ化して公開する際に皆さんに役立つことを願っています。

以上がVue-cli および Webpack パッケージのリリース最適化ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。