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 を例として、プラグインを使用してライブラリを導入しますオンデマンドで梱包体積を大幅に削減できます。
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 プラグインを使用して、マルチスレッド ビルドを有効にします。
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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
