前端优化 1 待优化项分析

待优化项分析

打包项目资源分析

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

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

1.下载安装

npm install webpack-bundle-analyzer --save-dev 

2. 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()
        }
    }
}

3. 配置启动指令 package.josn

{
    ...
    "scripts":{
        "report":"npm_config_report= true npm run build "
    }
}

4. 使用

   
   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)