码迷,mamicode.com
首页 > 其他好文 > 详细

React杂篇(1) -- 打包发布注意事项

时间:2018-12-14 21:05:32      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:用户   img   res   没事   pac   info   技术分享   lock   图片   

打包后资源路径

问题:直接打包会出现一下情况:

技术分享图片

方式一:

package.json文件下加入homepage字段

{
  "name": "wap-v2",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",         //加上此句即可
  "dependencies": {...}
}

方式二:

webpack相关 -> config/paths.js

function getServedPath(appPackageJson) { 
    const publicUrl = getPublicUrl(appPackageJson); 
    const servedUrl = 
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : ‘./’); // 配置文件跟路径’/’ 修改这里 
    return ensureSlash(servedUrl, true); 
}

体积优化

项目的体积优化也很重要,开发时的按需加载,模块化分割这里就不多说了。

打包时,会生成一系列的.map文件,占的体积非常大。

webpack相关 -> webpack.config.prod.js

devtool: shouldUseSourceMap ? ‘source-map‘ : false,
//变为
devtool:  false,

无报错但空白页

经过上面的配置与修改心想这下总该没事了吧!

然而事实可能不同:

技术分享图片

HashRouter与BrowserRouter的异同

项目中控制路由跳转使用的是BrowserRouter。

在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的,就像上面。

原因:

在browserHistory 模式下,URL 是指向真实 URL 的资源路径,当通过真实 URL 访问网站的时候,由于路径是指向服务器的真实路径,但该路径下并没有相关资源,所以用户访问的资源不存在。

解决

BrowserRouter 改为 HashRouter

上面文档并不完善,之后有时间再添加或更改。

React杂篇(1) -- 打包发布注意事项

标签:用户   img   res   没事   pac   info   技术分享   lock   图片   

原文地址:https://www.cnblogs.com/adoctors/p/10121366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!