前端项目优化

　　

项目构建打包优化（通过speed-measure-webpack-plugin分析打包速度，使用BundleAnalyzerPlugin对打包结果进行分析）

const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")


module.exports = {
  configureWebpack: {
    plugins: [
       new SpeedMeasureWebpackPlugin({
    outputTarget: "test.text",
    outputFormat: "humanVerbose",
    loaderTopFiles: 20
  }),
  new BundleAnalyzerPlugin(),
    ]
  }
}

 

moment时间插件： 可替换成dayjs。但是如果使用地方过多，建议在此基础上进行更改。momentjs 2.18以上版本会将所有本地化内容和核心功能一起打包，我们借助IgnorePlugin在打包时忽略本地化内容，momentjs体积由670kb变为160kb

 

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  }
}

 

 

webpack-deadcode-plugin获取中未使用文件及未使用的已暴露变量

项目安装依赖

npm install webpack-deadcode-plugin --save-dev

 

 

# in .babelrc / babel.config.js
{
  "presets": [
    ["env", { modules: false }]
  ]
}

# or in webpack.config.js -> module/rules
{
  loader: 'babel-loader',
  options: {
    presets: [
　　　　//['@babel/env', { modules: false }]

　　　　['env', { modules: false }] 
　　　　] 
　　}
}

 

 

const DeadCodePlugin = require('webpack-deadcode-plugin');

const webpackConfig = {
  ...
  optimization: {
    usedExports: true,
  },
  plugins: [
    new DeadCodePlugin({
      patterns: [
        'src/**/*.(js|jsx|css)',
      ],
      exclude: [
        '**/*.(stories|spec).(js|jsx)',
      ],

　　　　 exportJSON: "./analysis" // 将无用文件信息以json形式导出

    })
  ]
}

 执行npx webpack 或者 npm run build 即可

得到无用信息（路径）的json文件后，通过node文件管理批量删除

const fs = require("fs");

const data = fs.readFileSync("./deadcode.json", "utf8");

data.split("\n"),forEach(path => {
     fs.rmSync(path)
})

 

通过depcheck得到未使用的依赖包

全局安装 npm install -g depcheck    在项目文件下执行  depcheck