前端优化

162 阅读1分钟

待优化项分析

打包项目资源分析

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

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


个人公众号