[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_51":52},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","DestinyMajesty","page",1,"limit",20,"total","id","33364","avatar_url","https://avatars3.githubusercontent.com/u/20080263?v=4","githubUsername","create_at","2018-05-16 01:47:38.307","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":31,"_47":48,"_25":44,"_49":50},"33594","author_id","tab","share","content","# 代码分片\r\n- 引用webpack官方文档：\"代码分片是webpack最引人注目的特性之一。这个特性允许你将你的代码分成不同的bundle，然后可以按需或并行加载。如果使用得当，可以对加载时间产生重大影响。\"；\r\n- 代码分片有不同的粒度，可以是根据不同URL的来分割代码，当请求到对应的URL的时候，再去加载相应的代码文件；也可以更加某些事件触发来分割代码，比如，某个组件是在点击了某个按钮后，才会出现的，可以当点击某个按钮的时候，再去加载相应的组件代码；\r\n- 我这里主要用的就是根据URL来分割代码，所以用到的是react-router4.0 + loadable + webpack来进行代码分片的\r\n\r\n# 具体实现\r\n\r\n我这里用到了webpack的Code Splitting的Dynamic Imports，即import('path/to/module') -> Promise 函数。webpack在打包的时候，当遇到import(path/to/module)函数时候，就会自动启用代码分片了，把函数参数中的文件分割出来，在需要使用的时候，再去加载。\r\n\r\n\r\n- webpack的配置如下，webpack.config.js文件：\r\n```\r\n const path = require('path');\r\n const webpack = require('webpack');\r\n module.exports = {\r\n entry: {\r\n index: './src/index.js'\r\n },\r\n plugins: [\r\n new webpack.optimize.CommonsChunkPlugin({\r\n name: 'common' // Specify the common bundle's name.\r\n })\r\n ],\r\n output: {\r\n filename: '[name].bundle.js',\r\n chunkFilename: '[name].bundle.js',\r\n path: path.resolve(__dirname, 'dist')\r\n }\r\n };\r\n```\r\n- webpack的入口文件：./src/index.js文件的代码如下：\r\n\r\n```\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport RootRoute from './routes';\r\n\r\nReactDOM.render(, document.getElementById('root'));\r\n```\r\n- 根router文件 ./src/index.js 文件的代码如下：\r\n\r\n```\r\nimport React from 'react'\r\nimport {\r\n BrowserRouter as Router,\r\n Route,\r\n Link,\r\n Switch,\r\n Redirect,\r\n} from 'react-router-dom';\r\n\r\nimport home from './components/home';\r\nimport users from './componets/users';\r\n\r\nconst BasicExample = () => (\r\n

\r\n

首页
用户

\r\n

\r\n \r\n \r\n \r\n \r\n \r\n

\r\n)\r\nexport default BasicExample\r\n```\r\n这就是react-router4.0的典型实现方式，组件用于导航，点击可跳转到to属性的地址；组件用于重定向；组件就是具体的router，当URL与path属性匹配的时候，会显示component属性的内容。具体的使用请看react-router的文档。\r\n\r\n- 在来看关键的users组件的实现方式，这里就用到了import('path/to/module') -> Promise；\r\n- ./src/components/users/index.js\r\n\r\n```\r\nimport Loadable from 'react-loadable';\r\n\r\nexport default Loadable({\r\n\tloader: () => import('./userspage.js'),\r\n\tloading() {\r\n\t return

\r\n\t}\r\n});\r\n```\r\n这里用到了react-loadable库，这是一个非常好用的库。需要传入一个用于加载组件的函数，和一个组件在加载时，用来占位显示 “Loading” 状态的组件。\r\nuserspage.js就是用户页面的具体实现。\r\n\r\n- 经过我们的这些处理后，用户页面userpage.js会在webpack打包的时候，被分片为单独的文件，只有当我们在访问用户页面，比如输入URL：localhost/users的时候，才会去加载它。","title","基于react-router4.0与react-loadable的Webpack代码分片","last_reply_at","2018-05-16 06:40:54.167","good","top","visit_count",3657,"author",{"_13":14,"_22":23},"publicConfig",{"_53":54,"_55":56},"apiBaseUrl","https://api.cnodejs.org","turnstileSiteKey","0x4AAAAAAD_J2wBk6UWPDHNQ"]