前言
有时候开发完一个vue项目后,会发现项目包又大打包速度还慢,里面还有很多冗余的文件,比如图片,.vue文件,.js文件等,如果你也遇到类似问题,或者你希望你的项目包更小点,打包速度更快点,本文也许对你有所帮助。
让项目体积更小点
压缩打包的文件
包安装
npm i compression-webpack-plugin@5.0.0 -D / cnpm i compression-webpack-plugin@5.0.0 -D /yarn add compression-webpack-plugin@5.0.0
复制代码
webapack配置
module.exports = {
...
chainWebpack:config => {
config.plugin('compression')
.use(
new CompressionWebpackPlugin(
{
filename: info => {
return `${info.path}.gz${info.query}`
},
algorithm: 'gzip',
threshold: 10240,
test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
minRatio: 0.8,
deleteOriginalAssets: true
}
)
)
}
}
复制代码
推荐在生产环境使用
删除多余的文件
包安装
npm i useless-files-webpack-plugin -D / cnpm i useless-files-webpack-plugin -D /yarn add useless-files-webpack-plugin
复制代码
webapack配置
module.exports = {
...
chainWebpack = config => {
config.plugin('uselessFile')
.use(
new UselessFile({
root: path.resolve(__dirname,'./src/assets/images'),
clean:true,
exclude: /node_modules/
})
)
}
}
复制代码
推荐生产环境使用
忽略 moment 本地化
webpack配置
module.exports = {
...
chainWebpack : config=>{
config.plugin('IgnorePlugin')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
}
}
复制代码
按需加载Element
Babel.config.js
module.exports = {
...
plugins:[
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
}
复制代码
按需导入组件
import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)
复制代码
按需加载Echart
Babel.config.js
module.exports = {
...
plugins:[
...
'equire'
]
}
复制代码
按需使用echart
// eslint-disable-next-line
const echarts = equire([
"line",
"bar"
])
export default echarts
复制代码
按需加载loadsh
Babel.config.js
module.exports = {
...
plugins:[
...
'lodash'
]
}
复制代码
webpack配置
module.exports = {
...
chainWebpack: config =>{
...
config.plugin('loadshReplace')
.use(new LodashModuleReplacementPlugin())
}
}
复制代码
让项目打包更快
删除 prefetch、preload
webapack配置
module.exports = {
...
chainWebpack: config =>{
config.plugins.delete('prefetch')
config.plugins.delete('preload')
}
}
复制代码
看自己项目情况/需求使用
开启多线程打包(HappyPack)
包安装
npm i happypack -D / cnpm i happypack -D /yarn add happypack
复制代码
webpack配置
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {
...
chainWebpack: config =>{
...
const jsRule = config.module.rule('js')
jsRule.uses.clear()
jsRule.use('happypack/loader?id=babel')
.loader('happypack/loader?id=babel')
.end()
config.plugins.push(
new HappyPack({
id:'babel',
loaders:['babel-loader?cacheDirectory=true'],
threadPool:happyThreadPool
})
)
}
}
复制代码
看自己项目情况使用
动态链打包
webpack.dll.config
const webpack = require('webpack')
const path = require('path')
module.exports = {
entry: {
vendor: ['vue', 'vue-router', 'axios', 'echarts','element-ui','moment','sortablejs'] // 第三方包
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, 'dll'),
library:'[name]_lib'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, 'dll/[name]-manifest.json'),
name: '[name]_lib'
})
]
}
复制代码
执行一下这个文件,拿到编译后的代码
webpack --config webpack.dll.config.js
复制代码
webpack配置
module.exports = {
...
configureWebpack: config => {
config.plugins.push(
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/vendor-manifest.json')
})
)
config.plugins.push(
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname,'dll/vendor.dll.js') })
)
}
}
复制代码
end
以上是笔者平时针对自己项目或者公司项目累积的一点vue项目打包优化知识,也许你有更好的优化点,或者更好的优化方案,欢迎提供案例,学习学习。