create-react-app打包优化

打包

通过npm run build进行打包

关闭soure-map

步骤一：项目打包时，默认开启了soure-map，因此打包后的项目体积变大

在config/webpack.config.js文件中修改shouldUseSourceMap的配置，置为false

注：如果没找到config/webpack.config.js文件，可以先在终端运行npn run eject

步骤二：将开发环境改为生产环境，让打包后的文件不包含.map文件

在config/webpack.config.js文件中修改devtool的配置，置为false

使用CDN引入第三方资源

引入步骤

1.在config/webpack.config.js文件中与plugins同级下配置externals

注：我用的clipboard是2.0.4的版本，所以需要用ClipboardJs，而不是Clipboard

2.在public\index.html文件中引入相关js资源与css资源

注：这里引入地址可以在 资源官网 或 https://www.bootcdn.cn/中查找（优先从官网找）

注意事项

externals中的格式为“引入资源名”：“script引入的全局变量”

//externals写法如下：
externals:{
	"react": "React"
    //react为：引入资源名
	//React为：script引入的全局变量
    //当遇到import React from "react"这类引入react的语句时，不去node_modules中找react，而是找全局变量React
}

1.引入资源名为下列语句中的react

import React from "react"

2.全局变量React可以通过以下方式找到

2.1新建html文件，引入CDN资源

2.2打开页面，F12打开控制台，输入React，可以看到全局变量React的提示及相关信息