現(xiàn)在全新的項目比較少了闯睹，大部分是在原有項目上面新增需求戏羽。收到一個小需求，本身需求不難楼吃。這項目是把后端操作系統(tǒng)和H5手機端展示頁做在一起的始花，打包入口文件只有一個，最后打包的時發(fā)現(xiàn)打包后的包體積比我想象中大太多了孩锡，H5部分還是需要在手機端展示衙荐。就有了后續(xù)……
Analyze 分析
vue-cli自帶分析，直接script開啟： "analyze": "npm_config_report=true npm run build"
分析文件
分析文件
static/js/vendor.0b9fa55c7048684aba81.js (1.18 MB)
static/js/app.c3251a9bef8c1924ea86.js (853.75 KB)
router 按需加載
原來這樣的寫法：import Home from '@/pages/home'
改成：const Home = () => import('@/pages/home')
1553067494614.jpg
添加SplitChunksPlugin
webpack 3 to webpack 4
餐卡：To v4 from v3
參考：html-webpack-plugin浮创，
參考：vue-loader升級15
參考： webpack3.x升級webpack4
- 更新 webpack 到 4.28.3 版本
- 更新 webpack-dev-server 到 3.1.14版本
- 更新 vue-loader 到 15.7.0版本
- 更新 html-webpack-plugin 到 3.2.0 版本
- 添加 webpack-cli 版本 3.2.1
- 添加 mini-css-extract-plugin 版本 0.5.0
webpack.dev.conf 修改
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
// 開發(fā)環(huán)境引入
mode: 'development',
...
module: {
...
}
plugins: {
...
new VueLoaderPlugin()
...
}
devServer: {
...
}
接著, 以下插件被廢棄掉了
- webpack.DefinePlugin
- webpack.NamedModulesPlugin
- webpack.NoEmitOnErrorsPlugin
utils.js 修改
現(xiàn)在 Vue Loader v15 使用了一個不一樣的策略來推導語言塊使用的 loader，需要更換成mini-css-extract-plugin
...
// 注釋掉原來的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
...
// 找到:
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: "vue-style-loader",
// publicPath: '../../'
// });
// 改為:
return [MiniCssExtractPlugin.loader].concat(loaders)
webpack.prod.conf.js 修改
vue-loader 升級了對應也要升級
extract-text-webpack-plugin 更換成 uglifyjs-webpack-plugin
要在配置表里添加optimization選項
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
output: { ...},
// 這里添加
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
uglifyOptions: {
warnings: false
}
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
],
splitChunks:{
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
// 這里添加
plugins: [
...
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
...
]
升級后
由于后臺操作系統(tǒng)和H5是寫在一項目里面砌函，所以需要多做一步斩披。
多個入口\出口
- 拆成多入口打包
- 看到ueditor這個插件時，這個富文本是非常大的讹俊，打包H5可以排除掉
- 框架用了兩個：element-ui（PC端）垦沉、mint-ui（手機端），分入口打包
