副问题[/!--empirenews.page--]
怎样输出Webpack构建说明
- 输出Webpack构建信息的.json文件:webpack --profile --json > starts.json
- --profile:记录构建中的耗时信息
- --json:以json名目输出构立功效,最后只输出一个json文件(包括全部的构建信息)
- web可视化查察构建说明:获得了webpack构建信息文件starts.json,怎样举办很好的可视化查察?
1. 方案一:通过可视化说明器材Webpack Analyse,是个在线Web应用,上传starts.json文件就可以;不外仿佛必要翻墙;
2. 方案二:安装webpack-bundle-analyzer器材npm i -g webpack-bundle-analyzer,天生starts.json后直接在其文件夹目次执行webpack-bundle-analyzer后,赏识器会打开对应网页并展示构建说明文档地点webpack-bundle-analyzer
3. webpack-dashboard是一款统计和优化webpack日记的器材,可以以表格形势展示日记信息。个中包罗构建进程和状态、日记以及涉及的模块列表
4. jarvis是一款基于webapck-dashboard的webpack机能说明插件,机能说明的功效在赏识器表现,比webpack-bundler-anazlyer更雅观清楚GitHub文档地点
- npm i -D webpack-jarvis
- webpack.config.js设置:
- const Jarvis = require("webpack-jarvis");
- plugins: [
- new Jarvis({
- watchOnly: false,
- port: 3001 // optional: set a port
- })
- ];
- port:监听的端口,默认1337,监听面板将监听这个端口,凡是像http://localhost:port/
- host:域名,默认localhost,不限定域名。
- watchOnly:仅仅监听编译阶段。默以为true,假如高为false,jarvis不只仅运行在编译阶段,在编译完成后还保持运行状态。
- 界面:看到构建时刻为:Time: 11593ms(作为优化时刻比拟)
webpack设置优化
- webpack在启动时会从设置的Entry出发,理会出文件中的导入语句,再递归理会。
- 对付导入语句Webpack会做出以下操纵:
1. 按照导入语句探求对应的要导入的文件;
2. 在按照要导入的文件后缀,行使设置中的Loader行止理赏罚文件(如行使ES6必要行使babel-loader处理赏罚)
1. 优化Loader设置
- Loader处理赏罚文件的转换操纵是很耗时的,以是必要让尽也许少的文件被Loader处理赏罚
- {
- test: /.js$/,
- use: [
- 'babel-loader?cacheDirectory',//开启转换功效缓存
- ],
- include: path.resolve(__dirname, 'src'),//只对src目次中文件回收babel-loader
- exclude: path.resolve(__dirname,' ./node_modules'),//解除node_modules目次下的文件
- },
2. 优化resolve.modules设置
- resolve.modules用于设置webpack去哪些目次下探求第三方模块,默认是['node_modules'],可是,它会先去当前目次的./node_modules查找,没有的话再去../node_modules最后到根目次;
- 以是当安装的第三方模块都放在项目根目次时,就没有须要安默认的一层一层的查找,直接指明存放的绝对位置
- resolve: {
- modules: [path.resolve(__dirname, 'node_modules')],
- }
3. 优化resolve.extensions设置
- 在导入没带文件后缀的路径时,webpack会自动带上后缀去实行扣问文件是否存在,而resolve.extensions用于设置实行后缀列表;默以为extensions:['js','json'];
- 及当碰着require('./data')时webpack会先实行探求data.js,没有再去找data.json;假如列表越长,可能正确的后缀越今后,实行的次数就会越多
- 以是在设置时为晋升构建优化需遵守:
1. 频率呈现高的文件后缀颖呷放在前面;
2. 列表尽也许的小;
3. 誊写导入语句时,只管写上后缀名
- 由于项目顶用的jsx较多,以是设置extensions: [".jsx",".js"],
- 根基设置后查察构建速率:Time: 10654ms;设置前为Time: 11593ms
(编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|