react项目实战(权限模块开发八)js文件分开打包
2017-07-29 21:34
1256 查看
才开发几个界面就发现打包出的index.js文件就有700多kb了,由于部分插件的js文件是不会变化的,单独打包可以充分利用浏览器的缓存功能。
第一步:在项目跟目录下面添加一个webpack.config.js文件
第二步:为了将原有的js分开打,需要修改entry的指定.。由于我的项目用到了jquery,所以将jquery单独达成一个独立文件,再将react的相关组件打包成vendors.js。
第三步:指定插件引用信息:
config文件的全部内容如下:
这里是将js文件再压缩成gzip格式。
第四步:修改下public/index.html文件内容,因为我们将相应插件是单独打包自然我们需要额外的引用相应的js文件,注意要将vendor.js放在第一位,如果把jquery放在第一位,会报错误
ok可以启动试试,运行下 npm run build看下打包的结果:
第一步:在项目跟目录下面添加一个webpack.config.js文件
第二步:为了将原有的js分开打,需要修改entry的指定.。由于我的项目用到了jquery,所以将jquery单独达成一个独立文件,再将react的相关组件打包成vendors.js。
webpackConfig.entry={ "index": "./src/index.js", vendor: vendors, jquery:["jquery"] }
第三步:指定插件引用信息:
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({ names: ["jquery","vendor"], minChunks: Infinity }));
config文件的全部内容如下:
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src/');
var webpack=require('webpack');
var CompressionWebpackPlugin = require('compression-webpack-plugin');
const vendors = [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux',
];
//将jquery单独打包,将react的相关组件单独打包
module.exports = function (webpackConfig, env) {
webpackConfig.entry={ "index": "./src/index.js", vendor: vendors, jquery:["jquery"] }
webpackConfig.plugins.push(new CompressionWebpackPlugin({ //gzip 压缩
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(js|css)$' //压缩 js 与 css
),
threshold: 10240,
minRatio: 0.8
}));
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
names: ["jquery","vendor"],
minChunks: Infinity
}));
return webpackConfig;
}
这里是将js文件再压缩成gzip格式。
webpackConfig.plugins.push(new CompressionWebpackPlugin({ //gzip 压缩 asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(js|css)$' //压缩 js 与 css ), threshold: 10240, minRatio: 0.8 }));
第四步:修改下public/index.html文件内容,因为我们将相应插件是单独打包自然我们需要额外的引用相应的js文件,注意要将vendor.js放在第一位,如果把jquery放在第一位,会报错误
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dva Demo</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="root"></div> <script src="vendor.js"></script> <script src="jquery.js"></script> <script src="index.js"></script> </body> </html>
ok可以启动试试,运行下 npm run build看下打包的结果:
相关文章推荐
- react项目实战(权限模块开发二) 项目配置修改
- react项目实战(权限模块开发一) 配置路由
- react项目实战(权限模块开发五) 系统首页开发
- react项目实战(权限模块开发三) 登陆界面开发
- react项目实战(权限模块开发四) SkinDropDown插件开发
- react项目实战(权限模块开发六)semantic-ui-react 加入到开发环境中
- react项目实战(权限模块开发九)dva的table控件使用
- react项目实战(权限模块开发七)通过ajax技术获取数据
- React 16+Redux+React Router 4 Node.Js全栈开发招聘App项目实战视频
- React新闻头条项目实战React.js入门基础与案例开发
- 【Vue】项目打包的时候,build.js文件过大,可以通过设置懒加载或者按照路由分模块加载进行打包
- Cocos2d-js 贪吃蛇实战项目,H5游戏开发
- 2017.7.1 慕课网-Java从零打造企业级电商项目实战:3 category模块设计与开发
- python——Django项目开发:配置项目/static/路径,调用css、img、js等静态文件
- React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块
- 项目开发技巧(一):将Web应用打包成war文件的方法总结
- Spring集成React用来开发前端----maven项目中用webpack打包react相关组件
- Node.js 切近实战(八) 之Excel在线(文件权限)
- Node.js静态文件服务器实战(接触nodejs开发中比较实用的部分技巧,获益匪浅)
- 如何降低Vue.js项目中Webpack打包文件的大小?