基于create react app的web页面优化大小的过程

安装分析工具

首先安装webpack-bundle-analyzer

yarn add -D webpack-bundle-analyzer

在工程的打包文件中加上plugin, 笔者的工程使用的craco, 因此在
加入如下代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require("path");


module.exports = {
...
  webpack: {
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerHost: '127.0.0.1',
            analyzerPort: 8888,
            openAnalyzer: true, // 构建完打开浏览器
            reportFilename: path.resolve(__dirname, `analyzer/index.html`),
        }),
    ],
  }
}

最后运行build后, 可以在本地的8888看到打包配置;

减少最终打包的大小

打包后, 发现一个less文件比较大, 结果是全局引入了antdesign的less文件导致的, 去掉整体引入, 会减少不少大小

然后, 发现moment比较大, 按网上的教程加入

  webpack: {
    plugins: [
      ...
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

大小没变化, 彻底删除

new webpack.IgnorePlugin(/moment$/),

要报错, 暂时不管了

然后按照优雅的代码的原则, 在路由上, 把相关性低的页面分开

const BasicPage = React.lazy(() => import("./pages/basic"));
// 外层需要搭配
<Suspense fallback={<div>Error</div>}>
</Suspense>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容