优化 RequireJS 项目(合并与压缩)- 优化器(Optimizer)
最近在使用js开发项目,用到了requirejs,到后面会发现好多的js文件要加载,于是找到了优化js的方法,就是使用requirejs自带的Optimizer优化器。
具体操作如下:
*前提是你已经安装了nodejs:
0.安装requirejs
sudo cnpm install requirejs -g / cnpm install requirejs -g / npm install requirejs -g /sudo npm install requirejs -g
1.构建一个配置文件(相对于执行文件夹)并包含指定的参数,build.js
2.编写build.js,内容如下(仅供参考):
({ appDir: './', baseUrl: './', dir: './dist', modules: [ { name: 'main' } ], fileExclusionRegExp: /^(r|build)\.js$/, optimizeCss: 'standard', removeCombined: true, paths: { jquery: 'vendor/jquery/dist/jquery.min', director: 'vendor/director/build/director.min', highcharts: 'vendor/highcharts/highcharts', react: 'vendor/react/react.min', reactAddons: 'vendor/react/react-with-addons.min', JSXTransformer: 'vendor/react/JSXTransformer', cookieStorage: 'vendor/cookie-storage/dist/cookie-storage', json2: 'vendor/json/json2', xdate: 'vendor/xdate/src/xdate', moment: 'vendor/moment/min/moment.min', jPages: 'vendor/jPages/js/jPages', numberFormat: 'vendor/number-format.js/lib/format.min', bootstrap:'vendor/bootstrap/dist/js/bootstrap.min', datetimepicker:'vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker', datetimepickerLanguage:'vendor/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN', fancybox:'vendor/fancybox/source/jquery.fancybox.pack', async:'vendor/async/lib/async' }, shim: { 'highcharts': { 'deps': ['jquery'], 'exports': 'Highcharts' // Still gotta make this available //使用全局的Highcharts做为模块名称 }, 'datetimepickerLanguage':{//因datetimepickerLanguage依赖datetimepicker,所以次代码是优先加载datetimepicker 'deps':['datetimepicker'] }, 'datetimepicker':{ 'deps':['css!vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min'] }, 'bootstrap':{ 'deps':['jquery'] }, 'fancybox':{ 'deps':[ 'jquery', 'css!vendor/fancybox/source/jquery.fancybox.css' ] }, 'async':{ 'deps':[ 'vendor/async/deps/nodeunit', 'css!vendor/async/deps/nodeunit.css' ] } }, map: { '*': { 'css': 'vendor/require-css/css' } } })
3.执行命令
r.js -o build.js
等待吧。
详细的可参考我的转载地址。也可QQ、微博联系
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/618
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/618