前端优化

前端优化

---

待优化项分析

打包项目资源分析

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

可视化打包分析工具: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

---

个人公众号