Javascript模块化编程，本站使用 require.js 优化JS加载，SEO优化

首先这个站是个工具类型站点，每个页面加载的Javascript非常多，虽然本站用了CDN加速，但是每次打开页面都需要做同步的加载N多JS，导致速度减慢，影响用户体验，其实还影响SEO，因为爬虫来爬取内容的时候，很多超时的现象。

前段时间和群里的一个SEO大牛交流，一针见血的指出了这个问题，我下决心要改，但是由于各种设计，再加上防止别人拔站，所以JS里做了很多验证，导致难度系数大大提升。

选型require.js ，保证JS异步加载，并且模块化使用，这对于本站是JS几乎是重构。但是坚持下去就能完美解决。那么下面来说下require.js吧。

<script src="js/require.js" data-main="js/main" defer="true" async="true"></script>

在使用的页面引入一个require.js，defer="true" async="true" ie不支持 async，但是支持defer，所以2个都协商，并且创建一个main.js ，这个js是主要控制当前页面要加载的Javascript。

小试牛刀 main.js：

1require.config({
2	paths: {
3		"a": "a",
4		"b": "b"
5		}
6});

paths：是配置js文件和别名指定，如 "a":"a" 表示，配置了一个a.js，并且别名指定为a。同理b也是。key表示别名，value表示js文件，可以不用写“.js”，默认结尾就是“.js”，如果有路径带上路径。如：

1require.config({
2	paths: {
3		"a": "/js/common/a",
4		"b": "/js/common/b"
5		}
6});

如果路径一致：也就是a.js和b.js是在相同文件下。

1require.config({
2	baseUrl: "js/common",
3	paths: {
4		"a": "a",
5		"b": "b"
6		}
7});

都是一个意思。就是减少了代码量。

如果是远程地址，直接写上远程地址即可：

1require.config({
2	paths: {
3		"a": "http://open.sojson.com/common/js/a",
4		"b": "b"
5		}
6});

写2份费劲就这样了，抱歉

评论区

加载中...