Skip to content

Commit

Permalink
DLL Integration (#1358)
Browse files Browse the repository at this point in the history 
* build: add dll support

* misc: fix dependency category
fix: load zone.js for dev in 2 sub entries

* misc: clean dll directory

* misc: fix caching bug
  • Loading branch information
@shlomiassaf @joshwiens
shlomiassaf authored and joshwiens committed Jan 11, 2017
1 parent d7c390c commit aa48e9a
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 1 deletion.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ npm-debug.log
/.awcache
.webpack.json
/compiled/
dll/

# Doc #
/doc/
Expand Down
51 changes: 51 additions & 0 deletions config/webpack.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@

const helpers = require('./helpers');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev

/**
* Webpack Plugins
*/
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
Expand All @@ -27,6 +29,9 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
HMR: HMR
});


const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;

/**
* Webpack configuration
*
Expand Down Expand Up @@ -136,6 +141,52 @@ module.exports = function (options) {
}
}),

new DllBundlesPlugin({
bundles: {
polyfills: [
'core-js',
{
name: 'zone.js',
path: 'zone.js/dist/zone.js'
},
{
name: 'zone.js',
path: 'zone.js/dist/long-stack-trace-zone.js'
},
'ts-helpers',
],
vendor: [
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/core',
'@angular/common',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angularclass/hmr',
'rxjs',
]
},
dllDir: helpers.root('dll'),
webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
devtool: 'cheap-module-source-map',
plugins: []
})
}),

/**
* Plugin: AddAssetHtmlPlugin
* Description: Adds the given JS or CSS file to the files
* Webpack knows about, and put it into the list of assets
* html-webpack-plugin injects into the generated html.
*
* See: https://github.com/SimenB/add-asset-html-webpack-plugin
*/
new AddAssetHtmlPlugin([
{ filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
{ filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
]),

/**
* Plugin: NamedModulesPlugin (experimental)
* Description: Uses file names as module name.
Expand Down
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@
"ci:nobuild": "npm run lint && npm test && npm run e2e",
"ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
"ci": "npm run ci:testall",
"clean:dll": "npm run rimraf -- dll",
"clean:aot": "npm run rimraf -- compiled",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean:start": "npm start",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"e2e:live": "npm run e2e -- --elementExplorer",
Expand Down Expand Up @@ -97,6 +98,7 @@
"@types/source-map": "^0.5.0",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^2.0.0",
"add-asset-html-webpack-plugin": "^1.0.2",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.4.0",
"awesome-typescript-loader": "~3.0.0-beta.17",
Expand All @@ -107,6 +109,7 @@
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "~2.0.0-beta.4",
"file-loader": "^0.9.0",
"find-root": "^1.0.0",
"gh-pages": "^0.12.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.7.0",
Expand Down Expand Up @@ -145,6 +148,7 @@
"webpack": "2.2.0-rc.3",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "2.2.0-rc.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "~2.3.1"
},
Expand Down

9 comments on commit aa48e9a

@asadsahi
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shlomiassaf @d3viant0ne Thanks for this change. Is there any wiki around using dll in this project?

@shlomiassaf
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asadsahi

DLL is integrated into the project as is.

You can look at webpack.dev.js for plugin configuration (DllBundlesPlugin)

There are 3 properties to configure:

  • bundles
    An object with key's representing bundle names, value is an array of all packages to include in that bundle.

  • dllDir
    The directory to store dll file.

  • webpackConfig
    Webpack config object/factory or the path to it
    The plugin use this config to fire up a new webpack instance and bundle the dll's.
    This is usually the same as your current configuration without plugins...

See more info here

Now that you know, would you be kind a post a PR with some doc's about it?
Will help us a lot!

Thanks

@asadsahi
Copy link

@asadsahi asadsahi commented on aa48e9a Jan 11, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shlomiassaf

How about this ? :)

One thing I couldn't figure out, how can this plugin help in achieving DLL better than implementing DLL using native DLL plugins. I have it configured in one of my project which is based on .net core spa project. One difference I can find is that in my project, I have to create dlls before running the project.

@shlomiassaf
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asadsahi Thanks!

The plugin is just an easy way to control the bundle and its integrity from one place as part of Webpack.

It does what you would normally do natively... same thing.

Your native solution needs to make sure nothing has changed, this is handled for you, including DllPlugin and DllReferencePlugin injections to the appropriate places.

The main reason for this plugin is to allow quick opt-out, just remove the plugin and your are done.
In a native solution you need to remove different pieces from different places, remove scripts etc..

There is no new "technology" here, just making it easier to use.

@asadsahi
Copy link

@asadsahi asadsahi commented on aa48e9a Jan 11, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shlomiassaf That makes sense now. Thanks.

Got few questions:

I was gonna list them here, but raised it here: :)

@maxisam
Copy link
Contributor

@maxisam maxisam commented on aa48e9a Jan 13, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we remove this line ?

https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js#L61

@asadsahi
Copy link

@asadsahi asadsahi commented on aa48e9a Jan 13, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its there for some reason, for aot I think, but there seems to be duplication in polyfill creation I observed as well.

I am confused with my configuration where to to put polyfills entry which works for dev, prod and aot.

@joshwiens
Copy link
Contributor

@joshwiens joshwiens commented on aa48e9a Jan 13, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maxisam @asadsahi - I'm in the middle or refactoring the webpack configs to simplify this process and allow the additions of vendor libs / pollyfills / plugins without needing to modify the webpack configs directly.

Should have an initial pass in a PR this evening.

@asadsahi
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@d3viant0ne nice to hear that.

Please sign in to comment.