打包优化--体积
1.安装包npm i source-map-explorer
2.配置命令指定要分析的js文件
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
//添加这行代码 分析 build/static/ 下面的所有js文件夹
"analyze": "source-map-explorer 'build/static/js/*.js"
},
3.运行 npm run analyze
打包优化--CDN
CDN是一种内容分发网络服务,当用户请求网站内容时,由离用户最近的服务器将缓存的资源内容传递给用户
1. 把需要做CDN缓存的文件排除在打包之外(react、react-dom)
2. 以CDN的方式重新引入资源 (react、react-dom)
craco.config.js
const { getPlugin, pluginByName } = require("@craco/craco");
const path = require("path");
module.exports = {
// webpack 配置
webpack: {
//配置别名
alias: {
"@": path.resolve(__dirname, "src"),
},
configure: (webpackConfig) => {
let cdn;
whenProd(() => {
// key: 不参与打包的包(由dependencies依赖项中的key决定)
// value: cdn文件中 挂载于全局的安量名称 为了替换之前在开发环境下
webpackConfig.externals = {
react: "React",
"react-dom": "ReactDOM",
};
// 配置现成的cdn资源地址
// 实际开发的时 用公司自己花钱买的cdn服务器
cdn = {
js: [
"https://",
"https://",
],
};
// 通过 htnlWebpackPlugin捂件 在public/index.htnl注入cdn资源
const { isFound, match } = getPlugin(
webpackConfig,
pluginByName("HtmlWebpackPlugin")
);
if (isFound) {
// 找到了HtmlWebpackPlugin的括件
match.userOptions.cdn = cdn;
}
return webpackConfig;
});
},
},
};
public/index.html
<% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL=> { %>
<script src="<%= cdnURL %>"></script>
<% }) %>