webpack拆包，分开第三库

 

记录一下开发中遇见的问题，开发完成后，打包，其中vender这个第三方库的包比较大，超过了1M, 而公司对包大小有限制，需要进行拆包 , 看了关于webpack的配置文件，plugins用的是CommonsChunkPlugin 进行分包的

new Webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks(module) {
        return (
            module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules') === 0))
    }
}),

new Webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
}),

new Webpack.optimize.CommonsChunkPlugin({
    name: 'app',
    async: 'vendor-async',
    children: true,
    minChunks: 3
}),

 我report打包的时候，查看webpack-bundle-analyzer图，发现vendor包里的element-ui占比很大，占了500多kb，所以我准备把element-ui从vendor里分离出来，增加一个chunks属性，从vendor包中提取名称有element-ui的包

 

new Webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks(module) {
        return (
            module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules') === 0))
    }
})

// 用chunks把element提取出来
new Webpack.optimize.CommonsChunkPlugin({
    name: 'element-ui',
    minChunks(module) {
        return (
            module.resource && /\.js$/.test(module.resource) && (/element-ui/).test(module.resource))
    },
    chunks: ['vendor']
})

 

这时候再打包，查看webpack-bundle-analyzer图，发现element-ui已经从vendor中分离出来了，

但是，现在打包放测试环境，还是会报错，webpackJsonp is not defined

需要回到配置文件，修改new HtmlWebpackPlugin下面的配置，增加一个chunks的属性，请注意它的顺序，不然发上去还是报错

new HtmlWebpackPlugin({
    filename: config.build.index,
    ...: ......,
    ...: ......,
    // 请注意顺序， manifest, 拆分的包， vendor， app
    chunks: ['manifest', 'element-ui', 'vendor', 'app']
})

然后再发上去，测试环境就不报错了，一切正常