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

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

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

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

開発プロセスでは、通常、jQuery、Bootstrap、 Echarts などのサードパーティライブラリですが、ライブラリ全体を導入すると、過剰なパッケージサイズやアクセス速度の低下などの問題が発生する可能性があります。したがって、babel-plugin-component プラグインを使用してオンデマンドを導入できます。

babel.config.js に設定:

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

ログイン後にコピー

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

ログイン後にコピー

2. Webpack の最適化

マルチスレッドビルドの使用

マルチスレッドビルドの使用パッケージ化速度を大幅に向上させるために、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 テクノロジは主に、頻繁に変更されないいくつかのライブラリを lib ファイルにパッケージ化するため、パッケージ化されるたびに、これらのライブラリファイルをパッケージ化する必要はありません。後で導入するために DllReferencePlugin を使用するだけです。

使用法:

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

ログイン後にコピー

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

ログイン後にコピー

index.html の
著者別の最新記事
- NullPointerException とは何ですか?どのように修正すればよいですか?
  
  2024-10-22 09:46:29
- 初心者からプログラマーへ: 旅は C の基礎から始まります
  
  2024-10-13 13:53:41
- PHP による Web 開発のロックを解除する: 初心者ガイド
  
  2024-10-12 12:15:51
- C の謎を解く: 新人プログラマーのための明確でシンプルな道
  
  2024-10-11 22:47:31
- コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  
  2024-10-11 19:36:51
- 内なるプログラマーを解き放つ: まったくの初心者のための C
  
  2024-10-11 15:50:41
- C で生活を自動化する: 初心者向けのスクリプトとツール
  
  2024-10-11 15:07:41
- PHP を簡単に: Web 開発の最初のステップ
  
  2024-10-11 14:21:21
- Python で何でも構築: 創造性を解き放つための初心者ガイド
  
  2024-10-11 12:59:11
- コーディングの鍵: 初心者のための Python の力を解き放つ
  
  2024-10-11 12:17:31
最新の問題

Angular アプリケーションで Javascript プロトタイプコンストラクターをインポートするとエラーがスローされるコンストラクターを含む JS ファイルをインポートしようとしている Angular アプリケーションがあります。しかし、アプリケーションを実行すると、webpack がエラーをスロ...

から 2024-04-04 11:36:15

0

1

288
関連トピック
詳細>