require.js构建优化

yacheng 发布于2019-08-21 12:22 / 603人阅读

摘要：未构建之前，全部分开加载。的优化，得再看下的示例，然后再写篇笔记记录下来。

想摸透javascript模块化编程是怎么一回事，在seajs和requirejs之间兜兜转转，看了许多相关资料和文章，算是大致理清它们的异同，撇开requirejs加载方式的另类（其实目前我暂时还没去感受），于写法，比较喜欢requirejs的写法，这个比较主观，这也得益于阮一峰大大那篇Javascript模块化编程（三）：require.js的用法，讲得很清楚，反而我看seajs的文档，反而迷迷糊糊。

其实模块化编程不难理解，主要我还是卡在了构建工具，压缩合并的优化上，虽然seajs官网上有很多相关教程，但我就是不理解，简直被自己蠢哭了。后来看到requirejs上有例子，就决定啃英文教程试一下。

需要用到node和npm，我直接在github上clone了requirejs的例子create-template-master所以可以跳过r.js的安装:

npm install -g requirejs
r.js -o app.build.js

例子已经有build.js，app目录也已经搭建好，所以只需要下面一条命令，就自动帮你构建了。

node r.js -o build.js

build.js是命令行配置参数文件，所以可以把build.js里面的配置参数直接写在上面那条命令的后面。like this：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

看下build.js里面怎么写：

{
    "appDir": "../www",     //待构建文件目录
    "baseUrl": "lib",       //和require.js里面基目录（baseUrl）一样
    "paths": {              //路径指定，如下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //构建目标文件目录
    "modules": [            //这个应该是模块配置，name表示入口文件
        {
            "name": "app"
        }
    ]
}

这是构建的log：

可以对比一下构建前后，打开www/index.html和www-built/index.html的js加载有什么不同。
未构建之前，全部js分开加载。

构建之后，只需要加载require.js和app.js。

构建之后，js已经是压缩合并的了，main.js，messages.js和print.js都合并到了app.js里面。

css的优化，得再看下require.js的示例，然后再写篇笔记记录下来。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87557.html

使用require.js构建优化项目实践

摘要：尝试用自己主页的简单代码构建优化下。存放和，放需要构建的项目代码，为构建目标文件夹。我另外一篇博文构建优化有简单说了下，构建的命令，其实上的官网，看有更详细的内容。尝试用自己主页的简单代码构建优化下。在文件夹requirejs-optimizer下新建三个文件夹：tools，www和www-built。tools存放r.js和build.js，www放需要构建的项目代码，www-b...

anRui 2019-08-21 12:23 评论0 收藏0
【前端构建】RequireJS及其优化工具

摘要：介绍一款模块加载工具的入门，并且重点介绍其优化工具。发布目录项目源代码工具目录，例如构建工具等。另外，前端代码发布前都会进行压缩，使文件足够小。原来是因为里了，所以优化工具把也合并进来了。而优化工具要用好，要多尝试他们的配置选项。前端变化太快，如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。一、RequireJS简介...

Loong_T 2019-08-19 17:59 评论0 收藏0
Javascript模块化及webpack基本介绍

摘要：可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。这标志模块化编程正式诞生。的模块系统，就是参照规范实现的。对象就代表模块本身。 javascript模块化及webpack基本介绍 JavaScript 模块化发展历程什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程什么是模...

figofuture 2019-08-21 18:00 评论0 收藏0
Require.js实现js模块化管理教程

摘要：再者，引入一大堆的文件也不美观，而使用即可实现的模块化异步加载。通过定义模块的方式可分为以下两类。当和这两个模块加载完成之后将会执行回调函数。插件可以使回调函数在结构加载完成之后再执行。最好的方式是使用字符串但这很难管理尤其实在多行的时候。什么是Require.js Require.js是一个AMD规范的轻量级js模块化管理框架，最新版本require.js 2.1.11压缩后只有1...

fox_soyoung 2019-08-20 12:21 评论0 收藏0
前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地...

EasonTyler 2019-08-26 11:58 评论0 收藏0