前端项目打包体积分析与优化

一、安装依赖分析工具

npm install webpack-bundle-analyz

二、修改webpack.config.js文件

1、导入上面下载的包

2、在plugins里创建实例

三、启动打包命令

npm run build

会弹出如下界面:

 

四、优化

1、通过CDN导入react-dom文件

修改webpack.config.js文件里的external配置

再次查看打包文件体积,发现已经没有了react-dom文件:

通过CDN引入react-dom:

在index.html里使用script标签进行引入:

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js></script>

相关推荐

  1. 前端项目体积优化策略

    2024-03-15 21:00:04       30 阅读
  2. vue项目打包体积优化之-productionSourceMap设置

    2024-03-15 21:00:04       63 阅读
  3. webpack 打包前端项目

    2024-03-15 21:00:04       53 阅读
  4. webpack 打包前端项目

    2024-03-15 21:00:04       51 阅读
  5. vue 项目优化打包时间

    2024-03-15 21:00:04       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 21:00:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 21:00:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 21:00:04       82 阅读
  4. Python语言-面向对象

    2024-03-15 21:00:04       91 阅读

热门阅读

  1. SpringMVC访问路径设置

    2024-03-15 21:00:04       41 阅读
  2. MyBatis详解

    2024-03-15 21:00:04       41 阅读
  3. LeetCode2789. Largest Element in an Array after Merge Operations

    2024-03-15 21:00:04       44 阅读
  4. Linux磁盘管理

    2024-03-15 21:00:04       41 阅读
  5. RK3568 Ubuntu解决无法制作SD卡的问题

    2024-03-15 21:00:04       41 阅读
  6. 【vue回调函数中的 this 指向上】

    2024-03-15 21:00:04       36 阅读
  7. C++ 预编译头文件

    2024-03-15 21:00:04       43 阅读