一.升级webpack4
1️⃣ vender/menufest/app
app.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。
vendor: ['react', 'react-router-dom', 'react-dom', 'react-redux']
2️⃣启用optimization
runtime 优化持久化缓存的
, runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来.
optimization: {
runtimeChunk: {
name: 'manifest'
},
// minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必须是数组，在production模式下使用到，见步骤4
splitChunks: {
chunks: 'all', //对哪些模块进行优化
minSize: 30000, //要生成的块的最小大小。
minChunks: 1, //分割前必须共享模块的最小块数。
maxAsyncRequests: 5, //按需加载最大并行请求数
maxInitialRequests: 5, //入口点处的最大并行请求数。
name: false, //拆分块的名称。提供true将根据块和缓存组密钥自动生成名称。提供字符串或函数将允许您使用自定义名称。如果名称与入口点名称匹配，则将删除入口点。
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
priority: -10,
reuseExistingChunk: true,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(less|scss|css)$/,
chunks: 'all', // merge all the css chunk to one file
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
二 依赖的正确安装
devDependencies用于本地环境开发时候。
dependencies用户发布环境
其实看名字我也知道是这个意思，我觉得没解释情况。
devDependencies是只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。
而dependencies依赖的包不仅开发环境能使用，生产环境也能使用。其实这句话是重点，按照这个观念很容易决定安装模块时是使用--save还是--save-dev。
三 按需加载
1 使用 react-loadable 实现路由的动态加载
2.第三方库的按需加载 ，如antMobile的按需加载，在.babelrc 中配置
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
"transform-runtime",
["import", { "libraryName": "antd-mobile","style": "css" },]
]
}
四 合理使用cdn
五 js脚本合理引用
1.尽量减少head中的script脚本
2.高德地图api改为异步加载
const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = 'https://webapi.amap.com/maps?v=1.4.8&key=dfba0f951c70f029a888263a3e931d0a&callback=onLoad';
document.head.appendChild(jsapi);
