现在全新的项目比较少了，大部分是在原有项目上面新增需求。收到一个小需求，本身需求不难。这项目是把后端操作系统和H5手机端展示页做在一起的，打包入口文件只有一个，最后打包的时发现打包后的包体积比我想象中大太多了，H5部分还是需要在手机端展示。就有了后续……
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')
...
// 开发环境引入
mode: 'development',
...
module: {
...
}
plugins: {
...
new VueLoaderPlugin()
...
}
devServer: {
...
}
接着, 以下插件被废弃掉了
- webpack.DefinePlugin
- webpack.NamedModulesPlugin
- webpack.NoEmitOnErrorsPlugin
utils.js 修改
现在 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')
}),
...
]
升级后
由于后台操作系统和H5是写在一项目里面，所以需要多做一步。
多个入口\出口
- 拆成多入口打包
- 看到ueditor这个插件时，这个富文本是非常大的，打包H5可以排除掉
- 框架用了两个：element-ui（PC端）、mint-ui（手机端），分入口打包
