首先可以使用speed-measure-webpack-plugin
插件测量各个插件和loader使用前后
所花费的时间
const smp = new SpeedMeasurePlugin()
configureWebpack: smp.wrap({})
1、对于一些静态资源进行cdn加载
vue.config.js
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}
pages.js
const glob = require('glob');
const pages = {};
const titleObj = {
client: '',
backend: ''
};
const cdn = {
js: [
'https://unpkg.com/vue@2.6.11/dist/vue.min.js',
'https://unpkg.com/vue-router@3.1.6/dist/vue-router.min.js',
'https://unpkg.com/vuex@3.1.3/dist/vuex.min.js'
]
};
module.exports.pages = function() {
glob.sync('./src/pages/*/main.js').forEach(filepath => {
const fileList = filepath.split('/');
const fileName = fileList[fileList.length - 2];
pages[fileName] = {
entry: `src/pages/${fileName}/main.js`,
template:
process.env.NODE_ENV === 'production'
? './public/index.html'
: `./public/html/${fileName}.html`,
filename: 'index.html',
title: titleObj[fileName],
chunks: ['chunk-vendors', 'chunk-common', fileName],
cdn: fileName === 'client' ? cdn : []
};
});
return pages;
};
html
<% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
<script
type="text/javascript"
src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
></script>
<% } %>
然后通过标签方式引入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
2、使用uglifyjs-webpack-plugin压缩js、去除console、开启缓存、并行编译等
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true
},
output: {
comments: false
}
},
cache: true,
parallel: true
})
or
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
}
}
3、使用compression-webpack-plugin开启gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
new CompressionWebpackPlugin({
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
4、使用happypack加快打包速度
它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
module: {
rules: [
{
test: /\.js[x]?$/,
use: 'Happypack/loader?id=js',
include: [path.resolve(__dirname, 'src')]
},
{
test: /\.css$/,
use: 'Happypack/loader?id=css',
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules', 'bootstrap', 'dist')
]
}
]
},
plugins: [
new Happypack({
id: 'js', //和rule中的id=js对应
//将之前 rule 中的 loader 在此配置
use: ['babel-loader'] //必须是数组
}),
new Happypack({
id: 'css',//和rule中的id=css对应
use: ['style-loader', 'css-loader','postcss-loader'],
})
]
5、使用image-webpack-loader压缩图片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
6、使用全局变量区分开发和生产环境
process.env.NODE_ENV === 'development' ? 本地 : 开发
cross-env 增加变量
"scripts": {
"serve-client": "cross-env page=client vue-cli-service serve --mode
development",
"serve-backend": "cross-env page=backend vue-cli-service serve --mode
development",
"build-client": "cross-env page=client VUE_APP_Version=1.0.0 vue-cli-service
build --mode production",
"build-backend": "cross-env page=backend VUE_APP_Version=1.0.0 vue-cli-service
build --mode production"
},
7、配置热更新
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].chunksSortMode = 'none';
return args;
});
}
8、resolve.extensions配置
resolve: {
extensions: ['.js', '.vue', '.json', '.ts']
},
频率最高的放在前面,不存在的不要写进去
9、使用postcss将px转化为rem
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 100, // 换算的基数
selectorBlackList: ['no-rem'],
propList: ['*']
})
]
}
}
10、cache-loader
在一些性能开销较大的 loader
之前添加 cache-loader
,将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader
目录下
将其放到其他loader之前即可
rules: [
{
test: /\.jsx?$/,
use: ['cache-loader','babel-loader']
}
]
11、thread-loader
thread-loader
放置在其它 loader
之前,那么放置在这个 loader
之后的 loader
就会在一个单独的 worker
池中运行。
rules: [
{
test: /\.jsx?$/,
use: ['thread-loader', 'cache-loader', 'babel-loader']
}
]
12、HardSourceWebpackPlugin
HardSourceWebpackPlugin
为模块提供中间缓存,缓存默认的存放路径是: node_modules/.cache/hard-source
。
配置 hard-source-webpack-plugin
,首次构建时间没有太大变化,但是第二次开始,构建时间大约可以节约 80%。
plugins: [
new HardSourceWebpackPlugin()
]
13、noParse
如果一些第三方模块没有AMD/CommonJS规范版本,可以使用 noParse
来标识这个模块,这样 Webpack
会引入这些模块,但是不进行转化和解析,从而提升 Webpack
的构建性能 ,例如:jquery
、lodash
。
module: {
noParse: /jquery|lodash/
}