配置 resolve.modules
webpack 的 resolve.modules 是用來配置模塊庫（即 node_modules）所在的位置浴栽。當(dāng) js 里出現(xiàn) import 'vue' 這樣不是相對队秩、也不是絕對路徑的寫法時(shí)，它便會到 node_modules 目錄下去找。
在默認(rèn)配置下车要，webpack 會采用向上遞歸搜索的方式去尋找。但通常項(xiàng)目目錄里只有一個(gè) node_modules，且是在項(xiàng)目根目錄渗磅。為了減少搜索范圍，我們可以直接寫明 node_modules 的全路徑检访。
++build/webpack.base.conf.js++
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
配置裝載機(jī)的 include & exclude
-
webpack 的裝載機(jī)（loaders）里的每個(gè)子項(xiàng)都可以有 include 和 exclude 屬性：
- include：導(dǎo)入的文件將由加載程序轉(zhuǎn)換的路徑或文件數(shù)組（把要處理的目錄包括進(jìn)來）
- exclude：不能滿足的條件（排除不處理的目錄）
我們可以使用 include 更精確地指定要處理的目錄始鱼，這可以減少不必要的遍歷，從而減少性能損失脆贵。
同時(shí)使用 exclude 對于已經(jīng)明確知道的医清，不需要處理的目錄，予以排除卖氨，從而進(jìn)一步提升性能会烙。
++build/webpack.base.conf.js++
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
include: [resolve('src')],
exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')],
exclude: /node_modules/
},
合理配置extensions擴(kuò)展名
resolve.extensions能夠自動解析確定的擴(kuò)展负懦，但是如果extensions擴(kuò)展名過多，會導(dǎo)致解析過程過多柏腻，所以我們要合理配置擴(kuò)展名纸厉，不要過多配置擴(kuò)展名，項(xiàng)目引用多的文件五嫂，擴(kuò)展名放在前面
resolve: {
extensions: ['.vue', '.js']
}
使用 webpack-parallel-uglify-plugin 插件來壓縮代碼
默認(rèn)情況下 webpack 使用 UglifyJS 插件進(jìn)行代碼壓縮颗品，但由于其采用單線程壓縮，速度很慢贫导。
我們可以改用 webpack-parallel-uglify-plugin 插件抛猫，它可以并行運(yùn)行 UglifyJS 插件，從而更加充分孩灯、合理的使用 CPU 資源闺金，從而大大減少構(gòu)建時(shí)間。
npm i webpack-parallel-uglify-plugin -D
++build/webpack.prod.conf.js++
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
//....
// 刪掉webpack提供的UglifyJS插件
//new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// warnings: false
// }
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
//}),
// 增加 webpack-parallel-uglify-plugin來替換
new ParallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
}),
使用 HappyPack 來加速代碼構(gòu)建
由于運(yùn)行在 Node.js 之上的 Webpack 是單線程模型的峰档，所以 Webpack 需要處理的事情只能一件一件地做败匹，不能多件事一起做。
而 HappyPack 的處理思路是：將原有的 webpack 對 loader 的執(zhí)行過程讥巡，從單一進(jìn)程的形式擴(kuò)展多進(jìn)程模式掀亩，從而加速代碼構(gòu)建。
npm i -D happypack
++webpack.base.conf.js++
module: {
rules: [
{
test: /\.js$/,
// 將對.js 文件的處理轉(zhuǎn)交給 id 為 babel 的HappyPack實(shí)例
use:['happypack/loader?id=babel'],
include: [resolve('src'), resolve('test'),
resolve('node_modules/webpack-dev-server/client')],
// 排除第三方插件
exclude:path.resolve(__dirname,'node_modules'),
},
{
test: /\.vue$/,
use: ['happypack/loader?id=vue'],
},
]
},
const HappyPack = require('happypack');
const HappyPackThreadPool = HappyPack.ThreadPool({size:5});
plugins: [
new HappyPack({
// 用唯一的標(biāo)識符id欢顷，來代表當(dāng)前的HappyPack是用來處理一類特定的文件
id:'vue',
loaders:[
{
loader:'vue-loader',
options: vueLoaderConfig
}
],
threadPool: HappyPackThreadPool,
}),
new HappyPack({
// 用唯一的標(biāo)識符id槽棍，來代表當(dāng)前的HappyPack是用來處理一類特定的文件
id:'babel',
// 如何處理.js文件，用法和Loader配置中一樣
loaders:['babel-loader?cacheDirectory'],
threadPool: HappyPackThreadPool,
}),
]
