html引用公共资源,webpack提取页面公共资源

公共脚本分离

思路：将react、react-dom基础包通过cdn引入，不打入bundle中

方法一：SplitChunksPlugin(webpack4内置插件)官网地址

chunks参数说明

.async 异步引入的库进行分离(默认)

.initial 同步引入的库进行分离

.all 所有引入的库进行分离(推荐)

//三方库分离

optimization:{

splitChunks: {

cacheGroups: {

commons: {

test: /(react|react-dom)/,

name: "vendors",

chunks: "all"

}

}

}

}

//公共脚本分离

optimization:{

splitChunks: {

minSize:0,

cacheGroups: {

commons:{

name:'commons',

chunks:"all",

minChunks:2 //至少引用2次，才打包出commons文件

}

}

}

}

引入方法

new HTMLWebpackPlugin({

chunks:["vendors",pageName]

})

打包结果

image.png

方法二：html-webpack-externals-plugin

cnpm i html-webpack-externals-plugin -D

webpack.prod.js

new HtmlWebpackExternalsPlugin({

externals: [

{

module: 'react',

entry: 'https://unpkg.com/react@16/umd/react.production.min.js',

global: 'React',

},

{

module: 'react-dom',

entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',

global: 'ReactDOM',

},

],

})

index.html