Immutable doc
001 fromJS setIn getIn is and shouldComponentUpdate
002 API 快速入门
react、react-native、redux、immutable...
Home Page: https://trusttheboy.github.io/blog/
Immutable doc
001 fromJS setIn getIn is and shouldComponentUpdate
002 API 快速入门
查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,
剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器
介绍1:webpack-bundle-analyzer(可视化)
将捆绑内容表示为方便的交互式可缩放树形图
模块功能:
安装和使用
npm install --save-dev webpack-bundle-analyzer
在webpack.config.js中:
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}
BundleAnalyzerPlugin== 构造函数可以采用默认的可选配置对象:
new BundleAnalyzerPlugin({
// 可以是`server`,`static`或`disabled`。
// 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下,会生成带有报告的单个HTML文件。
// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑,将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`,`parsed`或者`gzip`中的一个。
// 有关更多信息,请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson()方法的选项。
// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。
// 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' 日志级别。可以是'信息','警告','错误'或'沉默'。
})
启动服务:
生产环境查看:npm run build --report 或 正常build 即可启动查看器
开发环境查看:webpack -p --progress 或启动正常devServer服务即可启动查看器!
参考资料:
推荐一个网址:在这里
这里介绍了很多webpack优化的工具。
参考资料:https://www.npmjs.com/package/webpack-bundle-analyzer
== 介绍2:webpack官网提供的工具==
webpack提供的一个官方工具,可查看你的项目版本信息,有多少modules,多少chunks,中间有多少错误信息、有多少警告等等,方便你管理、查看。
操作步骤:
首先,你需要这么启动webpack,执行以下命令行,将会生成一个 stats.json 文件
webpack --profile --json > stats.json
1
之后在 官方分析工具里上传文件即可对你的bundle进行分析
==这里注意==:
这里生成的时候,webpack.config.js 文件中不要有console,打印信息,
否则,他会加入到 stats.json文件中,从而造成 stats.json 文件错误,并不是一个合格的 JSON 文件,所以官网会解析异常!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.