使项目更加合理
让项目兼容性更强
需要下载
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}
]
}
.babelrc
{
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
],
"presets": [
[
"env",
{
"modules": false
}
],
"stage-2"
]
}
使项目加载速度更快
查看我们项目加载情况
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin(),
],
代码压缩分割
optimization: {
splitChunks: {
chunks: 'async', // initial 对入口文件拆分 all都包括
minSize: 30000, // 小于这个数不拆分
minChunks: 1, // 引入次数必须大于等于这个数才拆分
maxAsyncRequests: 5, // 动态加载的js最多被拆分成5分
maxInitialRequests: 3, // 入口文件最多拆分成三分
automaticNameDelimiter: '~', // 名称分隔符
name: true, // 默认是chunk的名字通过分隔符分割
cacheGroups: { // 缓存组
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10 // 默认优先级
},
default: { // 其他第三方代码
minChunks: 2,
priority: -20,
reuseExistingChunk: true // 已经拆分出来的代码是否被重用
}
}
}
}
多设置一个入口来分割代码
entry: {
index: './src/index.js',
another: './src/another-module.js'
},