社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
1.首先引入webpack-bundle-analyzer模块
安装命令:npm install –save-dev webpack-bundle-analyzer
2.在webpack中的代码配置
首先要在webpack.base.conf.js里,这里我是把element-ui和vue单独抽离出来了,现在这两个模块在最后的vendor.js的确占了很大。 externals: {
'vue': 'Vue',
'element-ui': 'ElementUI' }
然后是在webpack.prod.conf.js里的配置,
代码如下,但是插入的位置不同,详细位置看图片
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8889,
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
logLevel: 'info'
})
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
最后在package.json文件的scripts里加入 "analyz": "NODE_ENV=production npm_config_report=true npm run build"
好啦,这样在webpack里基本的配置就完成了,而且你npm run build 的时候就会自动打开网址,显示你的打包后的js文件组成和大小。最后就是引入和使用了
3.需要在vue项目中的index.html里引入cdn上的文件,比如说因为element-ui和vue模块过大,我就把他俩单独引入了。而不是用import引入。
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>
最后在main.js把import引入的element-ui和vue注释掉就好了,别忘了把vue.use()那一项也注释掉哦!
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!