前端优化 1 待优化项分析

二次信任 提交于 2020-03-23 00:03:13

待优化项分析

打包项目资源分析

使用现在做主流的框架进行开发,大多都要经历打包这一过程,将核心代码和引入的第三方模块进行打包,但是往往会发现打包的结果不尽人意,在这里使用一个工具可以分析打包文件的构成.

可视化打包分析工具:webpack-bundle-analyzer

1.下载安装

npm install webpack-bundle-analyzer --save-dev 
  1. vue.config.js 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    ...
    chainWebpack:(config)={
        if(process.env.NODE_ENV === 'production'&&process.env.npm_config_report){
            config
            .plugin('webpack-bundel-analyze')
            .use(BundleAnalyzerPlugin)
            .end()
        }
    }
}
  1. 配置启动指令 package.josn
{
    ...
    "scripts":{
        "report":"npm_config_report= true npm run build "
    }
}
  1. 使用
    
    npm run  report  

通过该指令在打包的同时开启本地服务器可以浏览文件的构成


5.效果展示

![image](https://user-gold-cdn.xitu.io/2020/3/15/170dea38a55725bf?w=2252&h=1228&f=png&s=2097017)

--- 
![个人公众号](https://user-gold-cdn.xitu.io/2020/3/15/170dea4164f6e97d?w=258&h=258&f=jpeg&s=28190)
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!