• <big id="iig5e"><em id="iig5e"></em></big>

  • <big id="iig5e"><em id="iig5e"></em></big>
    <th id="iig5e"><option id="iig5e"></option></th>
    <th id="iig5e"><option id="iig5e"></option></th>
    <th id="iig5e"><video id="iig5e"></video></th>

  • 景安微信
    右側QQ聯系不上,可以加我微信
    您好,歡迎來到景安網絡!
    加盟景安
    主頁 >服務器教程 >【實戰分享】Webpack構建代碼質量壓縮

    【實戰分享】Webpack構建代碼質量壓縮


    來源:景安網絡發表日期:2019-03-26瀏覽次數:Tags:Webpack
    景安網絡專業的數據中心服務商,長期提供數據中心托管服務,私有云,互聯網解決方案,互聯網增值服務。針對工信委大力實施“萬企業上云”計劃,景安以我所能,為你而+,推出上云特惠,核心云計算產品降幅達50%!!也歡迎來聊右側qq
     
    •  Webpack構建流程:初始化配置參數 -> 綁定事件鉤子回調 -> 確定Entry逐一遍歷 -> 使用loader編譯文件 -> 輸出文件。今天小編為大家分享Webpack構建代碼質量壓縮。
    •  
    • Webpack

    先列個提綱

    •  本次優化構建代碼質量基本技術:
    1.  reactRouter按需加載;
    2.  公共代碼提取,以及代碼壓縮;
    3.  CDN接入;
    4.  開啟gzip壓縮;
    5.  接入treeShaking,剔除無用代碼
    6.  開啟Scope Hoisting
    •  (生產環境代碼構建)為實時查看每次配置后代碼構建情況,使用Webpack監聽文件避免每次手動build,并且開啟webpack-jarvis,實時查看構建分析,npm i -D webpack-jarvis。
    •  開啟監聽模式 
    
    
    1. watch: true,  
    2. watchOptions: {  
    3.     ignored: /node_modules/, // 忽略監聽文件  
    4.     aggregateTimeout: 300,  //文件變動后多久發起構建  
    5.     poll: 1000,  //每秒詢問次數,越小越好  

    一、react-router4實現按需加載

    •  單頁應用按需加載一般原則:

            1.將網站劃分成一個個小功能,在按照每個功能的相關度將他們分成幾個類;

            2.將沒一個類合并成一個chunk,按需加載對應的代碼;

            3.不可將用戶首次進入網站時需要看到畫面的對應功能Chunk按需加載;

    •  被分割出去的代碼的加載需要一定的觸發時機,即當用戶操作了或者即將操作對應功能時再去加載對應的代碼(默認使用react-router按需加載的觸發條件是路由的變化)
    •  實現條件:

            1.使用插件:npm i react-loadable;

            2.配合bable插件npm i @babel/plugin-syntax-dynamic-import;

    •  代碼示例: 
    
    
    1. // .bablerc  
    2.  
    3.   "plugins": ["@babel/plugin-syntax-dynamic-import"]  
    4.  
    5. // 示例代碼  
    6. Loadable({  
    7.   loader: () => import('./component'), //按需加載組件  
    8.   loading: Loading, //處理組件加載的loading、error等  
    9.   delay: 300  //延遲加載避免loading的閃爍問題  
    10. });  
    11. // Loading組件自定義  
    12. // 接受三個props,其中pastDelay:等待時觸發;timedOut:超時時觸發超過delay;error:出錯觸發默認為200ms  
    13. const Loading = ({ pastDelay, timedOut, error }) => {  
    14.     if (pastDelay) {  
    15.       return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>  
    16.     } else if (timedOut) {  
    17.       return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>  
    18.     } else if (error) {  
    19.       return <div>Error!</div> 
    20.     }  
    21.     return null;  
    22. }; 

    二、提取公共代碼webpack.optimization

    
    
    1. optimization: {  
    2.     splitChunks: {  
    3.       chunks: "all",  
    4.       cacheGroups: {  
    5.         vendors: {   
    6.             test: /node_modules/,  
    7.             name: 'vendors',   
    8.             minSize: 0,  
    9.             minChunks: 1,   
    10.             chunks: 'initial',  
    11.             priority: 2 // 該配置項是設置處理的優先級,數值越大越優先處理   
    12.         },  
    13.         commons: {  
    14.           name: "comomns",  
    15.           test: resolve("src/components"), // 可自定義拓展規則  
    16.           minChunks: 2, // 最小共用次數  
    17.           minSize:0,   //代碼最小多大,進行抽離  
    18.           priority: 1, //該配置項是設置處理的優先級,數值越大越優先處理   
    19.         }  
    20.     }  

    三、壓縮文件js\css

    •  使用npm i -D webpack-parallel-uglify-plugin啟用多線程并行壓縮JS 
    
    
    1. optimization: {  
    2.     minimizer: [  
    3.         new ParallelUglifyPlugin({  
    4.             cacheDir: '.cache/', //緩存壓縮,默認不緩存,設置存放位置開啟  
    5.             test: /.js$/, //匹配需要壓縮的文件,默認為/.js$/和Loader配置一樣  
    6.             //include: [], 使用正則去選擇需要被壓縮的文件和Loader配置一樣  
    7.             //exclude: [], 使用正則去去除不需要被壓縮的文件和Loader配置一樣  
    8.             //workerCount: 2, 開啟幾個子進程并發執行壓縮  
    9.             // sourceMap: false, 是否輸出source Map,開啟會導致壓縮變慢  
    10.             // uglifyJS: {}, 用于壓縮ES6代碼不可和uglifyJS同時使用  
    11.             uglifyJS:{//壓縮ES5代碼  
    12.                 output: {  
    13.                     // 是否輸出可讀性較強的代碼,即會保留空格和制表符,默認為輸出,為了達到更好的壓縮效果,可以設置為false  
    14.                     beautify: false,  
    15.                     //是否保留代碼中的注釋,默認為保留,為了達到更好的壓縮效果,可以設置為false  
    16.                     comments: false  
    17.                 },  
    18.                 compress: {  
    19.                     //是否在UglifyJS刪除沒有用到的代碼時輸出警告信息,默認為輸出  
    20.                     warnings: false,  
    21.                     //是否刪除代碼中所有的console語句,默認為不刪除,開啟后,會刪除所有的console語句  
    22.                     drop_console: true,  
    23.                     //是否內嵌雖然已經定義了,但是只用到一次的變量,比如將 var x = 1y = x, 轉換成 y = 1, 默認為否  
    24.                     collapse_vars: true,  
    25.                     // 提取出現多次但是沒有定義成變量去引用的靜態值  
    26.                     reduce_vars:true  
    27.                 }  
    28.             },  
    29.         }),  
    30.     ]  
    31. }, 
    •  提取和壓縮Css

            1.使用插件:optimize-css-assets-webpack-plugin、mini-css-extract-plugin

            2.使用示例:

    
    
    1. // 提取css到單獨的文件  
    2. const MiniCssExtractPlugin = require("mini-css-extract-plugin");  
    3. // optimizeCssPlugin CSS文件壓縮插件  
    4. const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');  
    5. const extractSCSS = new MiniCssExtractPlugin({  
    6.     filename: 'css/[name].[contenthash:8].css',  
    7.     chunkFilename: 'css/[name]_[contenthash:8].css',  
    8.     fallback:'style-loader'  
    9. });  
    10. ...  
    11. ...  
    12. plugins: [  
    13.     new optimizeCssPlugin({  
    14.         assetNameRegExp: /\.css$/g,  
    15.         cssProcessor: require('cssnano'),  
    16.         cssProcessorOptions: { discardComments: { removeAll: true } },  
    17.         canPrint: true  
    18.     }),  

    webpack配置接入CDN

    •  CDN
    •  網站接入CDN,需要將網頁的靜態資源上傳到CDN服務器,使用CDN地址訪問;
    1.  使用CDN可以決解資源并行下載限制,處理靜態資源Cookie同域名攜帶等問題;
    2.  CDN緩存和回源需要合理的設置靜態資源hash
    3.  接入CDN會引入多個域名,增加域名解析時間,可進行預解析域名<link rel="dns-prefetch" href="//js.dns.com" />
    •  webpack實現接入
    1.  output.publicPath設置JavaScript地址
    2.  css-loader.publicPath設置CSS導入的資源地址
    3.  WebPlugin.stylePublicPath中設置Css文件地址 
    
    
    1. // JavaScript  
    2. output: {  
    3.     publicPath: '//js.cdn.com/js/',  
    4.     path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方  
    5.     // 為輸出的JavaScript文件名加上Hash值使用`chunkhash`(chunkhash:根據模塊內容變化;hash: 根據每次構建隨機)  
    6.     filename: "js/[name].[chunkhash:8].js",  
    7.     chunkFilename: "js/[name]-[id].[chunkhash:8].js",  
    8. }, 

    開啟gzip壓縮

    •  使用插件:npm i -D compression-webpack-plugin;
    •  webpack配置 
    
    
    1. const CompressionPlugin = require("compression-webpack-plugin");  
    2. plugins: [  
    3.     new CompressionPlugin({  
    4.         filename: '[path].gz[query]', //目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑,[query] 替換成原查詢字符串  
    5.         algorithm: 'gzip',//算法  
    6.         test: /\.(js|css)$/,    //壓縮 js 與 css  
    7.         threshold: 10240,//只處理比這個值大的資源。按字節計算  
    8.         minRatio: 0.8//只有壓縮率比這個值小的資源才會被處理  
    9.     })  
    •  后臺開啟使用koa  
    
    
    1. const staticCache = require('koa-static-cache');  
    2. import config from './configs';  
    3. const app = new Koa();  
    4. app.use(staticCache(path.resolve(__dirname, "../dist"), {  
    5.     maxAge: 7 * 24 * 60 * 60,  
    6.     gzip: true, //開啟  
    7.     dynamic: true,  
    8. })) 

    接入treeShaking,剔除無用代碼

    •  Tree Shaking可以用來找出有用代碼,去除JavaScript中用不上的死代碼;但是它依賴于ES6靜態花模塊語法import\export的導入和導出
    •  webpack接入
    1.  修改.babelrc保留ES6模塊話語句
    •  注意新版本babel-preset-env已經預設babel-preset-es2015,babel推薦使用babel-preset-env取代babel-preset-es2015,并且繼續使用babel-preset-es2015會發出警告信息。 
    
    
    1.  
    2.   "presets": [  
    3.     ["env", {  
    4.       "modules": false  
    5.     }]  
    6.   ],  
    7.   "plugins": ["syntax-dynamic-import"]  

     

    •  webpack --display-used-exports運行構建帶上--display-used-exports可追蹤到Tree Shaking的工作;
    •  Webpack只能正確的分析出如何剔除死代碼,需要接入UglifyJs處理剔除(配置見上)

    開啟Scope Hoistion

    •  scope hoisting即作用域提升;
    •  在構建過程中,webpack會借助ES6 模塊化的靜態特性,確定模塊的依賴關系,將一個bundle中的靜態依賴提升到頂部。(所以需要和接入treeShaking一樣配置Babel開啟ES6模塊化)
    •  原理:分析模塊間的依賴關系,盡可能的將零散的模塊合并到一個函數中去,前提不能造成代碼冗余,因此只有被引用了一次的模塊才能被合并。
    •  接入好處:

            1.代碼體積減少

            2.代碼在運行時因為創建的函數作用域更少了,內存開銷也隨之變小

    •  webpack接入ModuleConcatenationPlugin內置插件 
    
    
    1. const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');  
    2. plugins: [  
    3.      new ModuleConcatPlugin(), //開啟scope Hoisting  
    4.  ], 
    0(好文)
    0(太水)
    版權聲明:部分文章源于網絡,如侵權請聯系我們刪除
    買購快云Plus,云服務器折上折

    專題頁

    色播