简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > Vue.js > 本文

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

WBOY
リリース： 2023-06-09 16:05:45
オリジナル
1007 人が閲覧しました

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 を例として、プラグインを使用してライブラリを導入しますオンデマンドで梱包体積を大幅に削減できます。

  1. 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')
    })
  ]
};
    ログイン後にコピー
    パッケージングを実行します: 
  1. cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules
    ログイン後にコピー
  1. index.html の
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！